Calendar module: add month view

UI/Templates/SchedulerUI/UIxCalMainView.wox

@@ -205,6 +205,9 @@
             <a class="iconButton md-button md-default-theme"
                label:aria-label="Week"
                href="#/calendar/week"><i class="md-icon-view-week"><!-- week view --></i></a>
+            <a class="iconButton md-button md-default-theme"
+               label:aria-label="Month"
+               href="#/calendar/month"><i class="md-icon-view-module"><!-- month view --></i></a>
           </div>
         </div>
       </md-toolbar>

UI/Templates/SchedulerUI/UIxCalMonthView.wox

@@ -7,7 +7,7 @@
       xmlns:rsrc="OGo:url"
       xmlns:label="OGo:label">
 
-    <div class="menu" id="currentViewMenu">
+    <div class="menu" id="currentViewMenu" ng-hide="true">
       <ul>
         <li><var:string label:value="New Event..."/></li>
         <li><var:string label:value="New Task..."/></li>
@@ -20,39 +20,44 @@
         <li><var:string label:value="View Raw Source"/></li>
       </ul>
     </div>
-    <span class="monthsHeader">
-      <span class="month1">
-        <a href="#"
-           id="leftNavigationArrow"
-           var:date="prevMonthQueryParameters.month"
-           onclick="return onCalendarGotoDay(this);"
-           ><img rsrc:src="arrow-left.png"/></a>
-      </span>
-      <span class="month0"><var:string value="monthNameOfThisMonth" /></span>
-      <span class="month1">
-        <a href="#"
-           id="rightNavigationArrow"
-           var:date="nextMonthQueryParameters.month"
-           onclick="return onCalendarGotoDay(this);"><img rsrc:src="arrow-right.png"/></a>
-      </span>
-      <a href="#" id="listCollapse"><img var:class="collapseBtnClass" rsrc:src="collapse.png"/></a>
-    </span>
+
+    <div layout="row" layout-align="center">
+      <h5>
+        <md-button
+            class="iconButton"
+            label:aria-label="Previous Month"
+            var:date="prevMonthQueryParameters.day"
+            ng-click="calendar.changeView($event)"><i class="md-icon-chevron-left"><!--icon--></i></md-button>
+        <var:string value="monthNameOfThisMonth" />
+        <md-button
+            class="iconButton"
+            label:aria-label="Next Month"
+            var:date="nextMonthQueryParameters.day"
+            ng-click="calendar.changeView($event)"><i class="md-icon-chevron-right"><!--icon--></i></md-button>
+      </h5>
+    </div>
     <div id="calendarContent">
       <div class="monthView">
-        <var:foreach list="headerDaysToDisplay" item="currentTableDay"
-                     ><div var:class="headerDayCellClasses"
-                           ><var:string value="labelForCurrentDayToDisplay"
-                           /></div></var:foreach>
-        <div class="days" const:id="monthDaysView"
-          ><var:foreach list="weeksToDisplay" item="currentWeek"
-            ><var:foreach list="currentWeek" item="currentTableDay"
-              ><div var:class="dayCellClasses"
+        <div id="calendarHeader" layout="row" layout-align="center center">
+        <var:foreach list="headerDaysToDisplay" item="currentTableDay">
+          <div class="md-flex"><var:string value="labelForCurrentDayToDisplay"/></div>
+        </var:foreach>
+        </div>
+        <div id="monthDaysView">
+          <var:foreach list="weeksToDisplay" item="currentWeek">
+            <div layout="row">
+            <var:foreach list="currentWeek" item="currentTableDay">
+              <div class="md-flex"
                     var:day="currentTableDay.shortDateString"
                     var:day-number="currentDayNumber"
-                    var:id="currentDayId"
-              ><div class="dayHeader"><var:string value="dayHeaderNumber"/></div
-              ></div>
+                    var:id="currentDayId">
+                <div class="dayHeader"><var:string value="dayHeaderNumber"/></div>
+                <sg-calendar-month-day
+                    sg-blocks="calendar.blocks"
+                    var:sg-day="currentTableDay.shortDateString" />
+              </div>
             </var:foreach>
+            </div>
           </var:foreach>
         </div>
       </div>

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