calendar widget and frontend fix

app/templates/orbit_bootstrap/assets/stylesheets/template/modules/calendar.scss

@@ -23,6 +23,13 @@
         text-align: center;
         font-size: 0.8125rem;
     }
+    .loading {
+        &:after {
+            content: '\f1ce';
+            font-family: FontAwesome;
+            animation: 2s linear 0s normal none infinite running fa-spin;
+        }
+    }
 }
 .w-calendar-table {
     margin-bottom: 0;
@@ -34,6 +41,7 @@
         background: $theme-color-third;
         color: $theme-white;
     }
+
 }
 
 .w-calendar-nav {
@@ -48,3 +56,11 @@
         right: 10px;
     }
 }
+@keyframes fa-spin {
+0% {
+    transform: rotate(0deg);
+}
+100% {
+    transform: rotate(359deg);
+}
+}

app/templates/orbit_bootstrap/modules/calendar/_calendar_widget1.html.erb

@@ -1,6 +1,9 @@
-<div class="w-calendar widget-calendar-1">
+<div class="w-calendar widget-calendar-1" data-module="calendar">
     <div class='month_template'>
-        <h4 class="widget-title"></h4>
+            <h4 class="widget-title ">
+                <span class="text"></span>
+                <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i> 
+            </h4>
         <div class="w-calendar-nav">
             <a href="#" class="w-calendar-nav-prev">
                 <i class="fa fa-chevron-left"></i>
@@ -29,102 +32,27 @@
 </div>
 
 <script>
-    if(typeof CalendarModuleMonth == "undefined"){
+    if(document.getElementById("calendar-widget_module") == null){
-        var CalendarModuleMonth = function(month,year,month_template){
+        var tag = document.createElement('script');
-            _this = this;
+        tag.setAttribute("id", "calendar-widget_module");
-            this.monthDom = $("<div data-year='"+year+"' data-month='"+month+"'></div>");
+        tag.src = "/assets/calendar_widget.js";
-            var template = month_template,
+        tag.onload = function(){
-                monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'],
+            $("div[data-module=calendar]").each(function(index){
-                firstDay = new Date(year,month,1),
+                var calendar = $(this),
-                lastDay = new Date(year,month+1,0),
+                    cmi = new CalendarModuleMonth(new Date(), calendar,calendar.data("subpart-id"));
-                last_inserted_date = 1;
+                cmi.currentMonth();
-
+                calendar.find("div.w-calendar-nav a").on("click",function(){
-            var renderMonth = function(){
+                    var el = $(this);
-                var num_of_rows = getNumberOfRows(year,month)
+                    if(el.hasClass("w-calendar-nav-prev")){
-                for(var i = 0; i < num_of_rows; i++){
+                        cmi.prevMonth();
-                    var tr = null;
+                    }else if(el.hasClass("w-calendar-nav-next")){
-                    if(i == 0){
+                        cmi.nextMonth();
-                        tr = makeRow("first");
-                    }else if(i == (num_of_rows - 1)){
-                        tr = makeRow("last");
-                    }else{
-                        tr = makeRow("middle");
                     }
-                    if(tr == null){
+                    return false;
-                        break;
+                })
+            })
         }
-                    template.find("table.table tbody").append(tr);
+        var head = document.getElementsByTagName("head");
-                    template.find("h4").text(monthNames[firstDay.getMonth()] + " " + firstDay.getFullYear());
+        head[0].appendChild(tag);
     }
-                _this.monthDom.append(template);
-                return _this.monthDom;
-            }
-        
-            function getNumberOfRows(year, month) {
-                var day = 1,
-                    sat_counter = 0,
-                    sunday_counter = 0, 
-                    date = new Date(year, month, day);
-        
-                while(date.getMonth() === month) {
-                    if(date.getDay() === 0) {
-                        sunday_counter++;
-                    }else if(date.getDay() === 6) {
-                        sat_counter++;
-                    }
-                    day++;
-                    date = new Date(year, month, day);
-                }
-                return (sunday_counter == 5 && sat_counter == 5 ? 6 : 5);
-            }
-        
-            var makeRow = function(position){
-                if(last_inserted_date <= lastDay.getDate()){
-                    var row = $("<tr></tr>");
-                    switch (position){
-                        case "first":
-                            for(var i = 0;i < 7;i++){
-                                var td = $("<td></td>");
-                                if(i >= firstDay.getDay()){
-                                    td.text(last_inserted_date);
-                                    td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
-                                    last_inserted_date++;
-                                }
-                                row.append(td);
-                            }
-                        break;
-                        case "middle":
-                            for(var i = 0;i < 7;i++){
-                                var td = $("<td></td>");
-                                td.text(last_inserted_date);
-                                td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
-                                last_inserted_date++;
-                                row.append(td);
-                            }
-                        break;
-                        case "last":
-                            for(var i = 0;i < 7;i++){
-                                var td = $("<td></td>");
-                                if(i <= lastDay.getDay()){
-                                    td.text(last_inserted_date);
-                                    td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
-                                    last_inserted_date++;
-                                }
-                                row.append(td);
-                            }
-                        break;
-                    }
-                }else{
-                    var row = null;
-                }
-                return row;
-            }
-            return renderMonth();
-        }
-    }
-
-var date = new Date(); 
-
-$(".w-calendar[data-subpart-id={{subpart-id}}]").html(new CalendarModuleMonth(date.getMonth(),date.getFullYear(),$(".w-calendar[data-subpart-id={{subpart-id}}] .month_template")));
-
 </script>

app/views/page_parts/_widget_form.html.erb

@@ -65,10 +65,10 @@
 		<div class="control-group">
 			<label class="control-label muted"><%= @widget_settings['override_category_with'].classify %> List :</label>
 			<div class="controls">
-				<% @custom.each do |c| %>
+				<% @custom.each do |cust| %>
 					<label class="checkbox">
-						<input type="checkbox" <%= @subpart.custom_array_field.include?(c.id.to_s) ? "checked='checked'" : "" rescue nil %> value="<%= c.id.to_s %>" name="page_part[sub_parts_attributes][<%= @select_number %>][custom_array_field][]">
+						<input type="checkbox" <%= @subpart.custom_array_field.include?(cust.id.to_s) ? "checked='checked'" : "" rescue nil %> value="<%= cust.id.to_s %>" name="page_part[sub_parts_attributes][<%= @select_number %>][custom_array_field][]">
-						<%= c["#{@display_field}"] %>
+						<%= cust.send(@display_field) rescue "" %>
 					</label>
 				<% end %>
 			</div>