Applied styling for the table view (#182).

src/assets/css/backend.css

@@ -416,6 +416,53 @@ body .form-horizontal .controls {
     margin-left: 158px;
 }
 
+#calendar .calendar-view {
+    overflow-x: scroll;   
+}
+
+#calendar .calendar-view > div {
+    width: 100%; 
+    min-width: 1000%;
+    overflow: auto;
+}
+
+#calendar .calendar-view .date-column {
+    overflow: auto;
+    float: left;
+    margin-right: 20px;
+}
+
+#calendar .calendar-view .date-column .provider-column .not-working {
+    background: #eaeaea;
+    border-radius: 3px;
+    padding: 10px;
+    text-align: center;
+}
+
+#calendar .calendar-view .date-column .provider-column {
+    overflow: auto;
+    float: left;
+    margin-right: 10px;
+}
+
+#calendar .calendar-view .date-column .provider-column .event {
+    font-size: 10px;
+    border-radius: 3px;
+    padding: 2px 3px;
+    cursor: pointer;
+}
+
+#calendar .calendar-view .date-column .provider-column .event.appointment {
+    background: #4790CA;
+    color: #fff;
+    
+}
+
+#calendar .calendar-view .date-column .provider-column .event.unavailability {
+    background: #409482;
+    color: #fff;
+    
+}
 
 /* BACKEND CUSTOMERS PAGE
    -------------------------------------------------------------------- */

src/assets/js/backend_calendar_table_view.js

@@ -73,6 +73,8 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
             $('#select-service').val(serviceId).trigger('change');
             $('#select-provider').val(providerId).trigger('change');
         }); 
+
+        $(window).on('resize', _setCalendarSize);
     }
 
     function _createHeader() {
@@ -107,7 +109,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
      * @param {Date} endDate End date to be displayed. 
      */
     function _createView(startDate, endDate) {
-        $('#calendar .calendar-view').empty();
+        $('#calendar .calendar-view').remove();
 
         var $calendarView = $('<div class="calendar-view" />').appendTo('#calendar'); 
 
@@ -116,6 +118,8 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
             endDate: endDate.toString('yyyy-MM-dd')
         });
 
+        var $wrapper = $('<div />').appendTo($calendarView);
+
         _getCalendarEvents(startDate, endDate)
             .done(function(response) {
                 if (!GeneralFunctions.handleAjaxExceptions(response)) {
@@ -125,21 +129,21 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                 var currentDate = startDate; 
 
                 while(currentDate <= endDate) {
-                    _createDateColumn($calendarView, currentDate, response); 
+                    _createDateColumn($wrapper, currentDate, response); 
                     currentDate.add({days: 1}); 
                 }
+
+                _setCalendarSize();
             })
             .fail(GeneralFunctions.ajaxFailureHandler);
-
-
     }
 
-    function _createDateColumn($calendarView, date, events) {
+    function _createDateColumn($wrapper, date, events) {
-        var $dateColumn = $('<div class="date-column" />').appendTo($calendarView); 
+        var $dateColumn = $('<div class="date-column" />').appendTo($wrapper); 
 
         $dateColumn
             .data('date', date.getTime())
-            .append('<h3>' + GeneralFunctions.formatDate(date, GlobalVariables.dateFormat) + '</h3>');
+            .append('<h5>' + GeneralFunctions.formatDate(date, GlobalVariables.dateFormat) + '</h5>');
 
         for (var index in GlobalVariables.availableProviders) {
             var provider = GlobalVariables.availableProviders[index]; 
@@ -148,7 +152,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
     }
 
     function _createProviderColumn($dateColumn, date, provider, events) {
-        var $providerColumn = $('<div class="provider-column col-xs-12 col-sm-2" />').appendTo($dateColumn); 
+        var $providerColumn = $('<div class="provider-column" />').appendTo($dateColumn); 
 
         $providerColumn.data('provider', provider); 
 
@@ -167,7 +171,8 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
         var plan = JSON.parse(provider.settings.working_plan)[day]; 
 
         if (!plan) {
-            $providerColumn.append('<div class="not-working">Not Working</div>');
+            $providerColumn.append('<div class="not-working">' 
+                    + (provider.first_name + ' ' + provider.last_name).trim() +' <br> Not Working</div>');
             return;
         }
 
@@ -263,6 +268,24 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
         }
     }
 
+    function _setCalendarSize() {
+        var height = window.innerHeight - $('#header').outerHeight() - $('#footer').outerHeight() 
+                - $('#calendar-toolbar').outerHeight() - $('.calendar-header').outerHeight() - 50;
+        $('.calendar-view').height(height); 
+
+        $('.calendar-view > div').css('min-width', '1000%');
+        var width = 0; 
+
+        $('.date-column').each(function(index, dateColumn) {
+            width += $(dateColumn).outerWidth();
+        });
+
+        $('.calendar-view > div').css('min-width', width + 50);
+
+        $('.calendar-view .not-working').outerHeight(height - 70);
+
+    }
+
     /**
      * Get the calendar events. 
      *