Added fixed table headers in the table calendar view.

src/application/views/backend/calendar.php

@@ -4,7 +4,10 @@
 <script type="text/javascript"
         src="<?php echo $base_url; ?>/assets/ext/jquery-fullcalendar/jquery.fullcalendar.min.js"></script>
 
-        <script type="text/javascript"
+<script type="text/javascript"
+        src="<?php echo $base_url; ?>/assets/ext/jquery-sticky-table-headers/jquery.stickytableheaders.min.js"></script>
+
+<script type="text/javascript"
         src="<?php echo $base_url; ?>/assets/ext/jquery-ui/jquery-ui-timepicker-addon.js"></script>
 
 <script type="text/javascript"

src/assets/css/backend.css

@@ -461,20 +461,9 @@ body .form-horizontal .controls {
     margin-right: 10px;
 }
 
-// #calendar .calendar-view .date-column .provider-column table {
-//     width: 350px;
-// }
-
-// #calendar .calendar-view .date-column .provider-column table thead {
-//     display: block;
-//     background: #fff;
-// }
-
-// #calendar .calendar-view .date-column .provider-column table tbody { 
-//     display: block;
-//     overflow: auto;
-//     min-height: 500px;
-// }
+#calendar .calendar-view .date-column .provider-column table thead{
+    background-color: #FFF;
+}
 
 #calendar .calendar-view .date-column .provider-column .event {
     font-size: 10px;

src/assets/js/backend.js

@@ -29,7 +29,7 @@ window.Backend = window.Backend || {};
         window.console = window.console || function() {}; // IE compatibility
 
         $(window)
-            .resize(function() {
+            .on('resize', function() { 
                 Backend.placeFooterToBottom();
             })
             .trigger('resize');

src/assets/js/backend_calendar_table_view.js

@@ -399,6 +399,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
      * @param {Date} endDate End date to be displayed. 
      */
     function _createView(startDate, endDate) {
+        $('#calendar .calendar-view table').stickyTableHeaders('destroy');
         $('#calendar .calendar-view').remove();
 
         var displayDate = startDate.getTime() !== endDate.getTime();
@@ -425,6 +426,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                 }
 
                 _setCalendarSize();
+                Backend.placeFooterToBottom();
             })
             .fail(GeneralFunctions.ajaxFailureHandler);
     }
@@ -569,6 +571,8 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
 
             current += 0.5; 
         }
+
+        $table.stickyTableHeaders();
     }
 
     /**
@@ -754,7 +758,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
             height = 500;
         }
 
-        $('.calendar-view').height(height); 
+        // $('.calendar-view').height(height); 
 
         $('.calendar-view > div').css('min-width', '1000%');
 
@@ -774,8 +778,8 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
     /**
      * Get the calendar events. 
      * 
-     * @param {Date} startDate
-     * @param {Date} endDate
+     * @param {Date} startDate The start date of the selected period.
+     * @param {Date} endDate The end date of the selected period.
      * 
      * @return {jQuery.jqXHR}
      */
@@ -812,9 +816,9 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
         $('#enable-sync, #google-sync').hide();
 
         // Auto-reload the results every one minute.
-        var interval = setInterval(function() {
-            $('#reload-appointments').trigger('click');
-        }, 20000); 
+        // var interval = setInterval(function() {
+        //     $('#reload-appointments').trigger('click');
+        // }, 20000); 
     };
 
 })(window.BackendCalendarTableView);