Calendar module: add month view

UI/WebServerResources/js/Appointments/component-model.js

@@ -95,6 +95,17 @@
       endDate.setTime(startDate.getTime());
       endDate.addDays(6);
     }
+    else if (view == 'month') {
+      viewAction = 'monthView';
+      startDate = date;
+      startDate.setDate(1);
+      startDate = startDate.beginOfWeek();
+      endDate = new Date();
+      endDate.setTime(startDate.getTime());
+      endDate.setMonth(endDate.getMonth() + 1);
+      endDate.addDays(-1);
+      endDate = endDate.endOfWeek();
+    }
     return this.$eventsBlocks(viewAction, startDate, endDate);
   };
 
@@ -111,7 +122,7 @@
     var params, futureComponentData, i,
         deferred = Component.$q.defer();
 
-    params = { view: view, sd: startDate.getDayString(), ed: endDate.getDayString() };
+    params = { view: view.toLowerCase(), sd: startDate.getDayString(), ed: endDate.getDayString() };
     Component.$log.debug('eventsblocks ' + JSON.stringify(params, undefined, 2));
     futureComponentData = this.$$resource.fetch(null, 'eventsblocks', params);
     futureComponentData.then(function(data) {

UI/WebServerResources/js/Common/ui-desktop.js

@@ -702,7 +702,6 @@
    * @example:
 
    <sg-calendar-day-block
-       class="event draggable"
        ng-repeat="block in blocks[day]"
        sg-block="block"/>
   */
@@ -730,6 +729,73 @@
           iElement.addClass('starts' + scope.block.start);
           iElement.addClass('lasts' + scope.block.length);
       }
+    }])
+
+  /*
+   * sgCalendarMonthDay - Build list of blocks for a specific day in a month
+   * @memberof SOGo.UIDesktop
+   * @restrict element
+   * @param {object} sgBlocks - the events blocks definitions for the current view
+   * @param {string} sgDay - the day of the events to display
+   * @example:
+
+   <sg-calendar-monh-day
+       sg-blocks="calendar.blocks"
+       sg-day="20150408" />
+  */
+    .directive('sgCalendarMonthDay', [function() {
+      return {
+        restrict: 'E',
+        scope: {
+          blocks: '=sgBlocks',
+          day: '@sgDay'
+        },
+        template:
+          '<sg-calendar-month-event' +
+          '  ng-repeat="block in blocks[day]"' +
+          '  sg-block="block"/>',
+      };
+    }])
+
+  /*
+   * sgCalendarMonthEvent - An event block to be displayed in a month
+   * @memberof SOGo.UIDesktop
+   * @restrict element
+   * @param {object} sgBlock - the event block definition
+   * @example:
+
+   <sg-calendar-month-event
+       ng-repeat="block in blocks[day]"
+       sg-block="block"/>
+  */
+    .directive('sgCalendarMonthEvent', [function() {
+      return {
+        restrict: 'E',
+        scope: {
+          block: '=sgBlock'
+        },
+        replace: true,
+        template:
+          '<div class="event">' +
+          '  <div>' +
+          '      <div>' +
+          '        <span ng-if="!block.component.c_isallday">{{ block.starthour }} - </span>' +
+          '        {{ block.component.c_title }}<span class="icons">' +
+          '          <i ng-if="block.component.c_nextalarm" class="md-icon-alarm"></i>' +
+          '          <i ng-if="block.component.c_classification == 1" class="md-icon-visibility-off"></i>' +
+          '          <i ng-if="block.component.c_classification == 2" class="md-icon-vpn-key"></i>' +
+          '        </span>' +
+          '      </div>' +
+          '  </div>' +
+          '  <div class="leftDragGrip"></div>' +
+          '  <div class="rightDragGrip"></div>' +
+          '</div>',
+        link: link
+      };
+
+      function link(scope, iElement, attrs) {
+        iElement.addClass('calendarFolder' + scope.block.component.c_folder);
+      }
     }]);
 
 })();

UI/WebServerResources/js/Common/utils.js

@@ -82,7 +82,7 @@ String.prototype.asDate = function () {
             if (this.length == 8) {
                 newDate = new Date(this.substring(0, 4),
                                    this.substring(4, 6) - 1,
-                                   this.substring(6, 8));
+                                   this.substring(6, 8)); // yyyymmdd
             }
         }
     }
@@ -156,6 +156,18 @@ Date.prototype.beginOfWeek = function() {
     return beginOfWeek;
 };
 
+Date.prototype.endOfWeek = function() {
+    var endOfWeek = this.beginOfWeek();
+    endOfWeek.addDays(6);
+
+    endOfWeek.setHours(23);
+    endOfWeek.setMinutes(59);
+    endOfWeek.setSeconds(59);
+    endOfWeek.setMilliseconds(999);
+
+    return endOfWeek;
+};
+
 // YYYYMMDD
 Date.prototype.getDayString = function() {
     var newString = this.getYear();

UI/WebServerResources/js/SchedulerUI.js

@@ -38,12 +38,13 @@
           }
         })
         .state('calendars.view', {
-          url: '/{view:(?:day|week)}/:day',
+          url: '/{view:(?:day|week|month)}/:day',
           views: {
             calendarView: {
               templateUrl: function($stateParams) {
                 // UI/Templates/SchedulerUI/UIxCalDayView.wox or
-                // UI/Templates/SchedulerUI/UIxCalWeekView.wox
+                // UI/Templates/SchedulerUI/UIxCalWeekView.wox or
+                // UI/Templates/SchedulerUI/UIxCalMonthView.wox
                 return $stateParams.view + 'view?day=' + $stateParams.day;
               },
               controller: 'CalendarController',
@@ -66,6 +67,11 @@
         // If no date is specified, show today's week
         var now = new Date();
         return '/calendar/week/' + now.getDayString();
+      })
+      $urlRouterProvider.when('/calendar/month', function() {
+        // If no date is specified, show today's month
+        var now = new Date();
+        return '/calendar/month/' + now.getDayString();
       });
 
       // if none of the above states are matched, use this as the fallback