feat(dayView): call the cell modifier for day view hour segments

BREAKING CHANGE: the `cell-modifier` callback is now called for the day view.

To migrate add a guard on the callback to check what the current view is and act accordingly

Closes #418

README.md

@@ -191,7 +191,7 @@ An optional expression that is evaluated when the view is changed by clicking on
 
 ### cell-modifier
 
-An optional expression that is evaluated on each cell generated for the year and month views. `calendarCell` can be used in the expression and is an object containing the current cell data which you can modify (see the `calendarHelper` service source code or just console.log it to see what data is available). If you add the `cssClass` property it will be applied to the cell.
+An optional expression that is evaluated on each cell generated for the year, month and day views. `calendarCell` can be used in the expression and is an object containing the current cell data which you can modify (see the `calendarHelper` service source code or just console.log it to see what data is available). If you add the `cssClass` property it will be applied to the cell.
 
 ### slide-box-disabled
 

src/directives/mwlCalendarDay.js

@@ -105,7 +105,8 @@ angular
         onDeleteEventClick: '=',
         editEventHtml: '=',
         deleteEventHtml: '=',
-        customTemplateUrls: '=?'
+        customTemplateUrls: '=?',
+        cellModifier: '='
       },
       controller: 'MwlCalendarDayCtrl as vm',
       bindToController: true

src/directives/mwlCalendarHourList.js

@@ -26,6 +26,12 @@ angular
         }
       });
 
+      vm.hourGrid.forEach(function(hour) {
+        hour.segments.forEach(function(segment) {
+          vm.cellModifier({calendarCell: segment});
+        });
+      });
+
     }
 
     var originalLocale = moment.locale();
@@ -105,7 +111,8 @@ angular
         onTimespanClick: '=',
         onDateRangeSelect: '=',
         onEventTimesChanged: '=',
-        customTemplateUrls: '=?'
+        customTemplateUrls: '=?',
+        cellModifier: '='
       },
       bindToController: true
     };

src/directives/mwlCalendarWeek.js

@@ -97,7 +97,8 @@ angular
         dayViewEventChunkSize: '=',
         onTimespanClick: '=',
         onDateRangeSelect: '=',
-        customTemplateUrls: '=?'
+        customTemplateUrls: '=?',
+        cellModifier: '='
       },
       controller: 'MwlCalendarWeekCtrl as vm',
       link: function(scope, element, attrs, calendarCtrl) {

src/templates/calendar.html

@@ -54,6 +54,7 @@
     on-timespan-click="vm.onTimespanClick"
     on-date-range-select="vm.onDateRangeSelect"
     custom-template-urls="vm.customTemplateUrls"
+    cell-modifier="vm.cellModifier"
     ng-switch-when="week">
   </mwl-calendar-week>
 
@@ -73,6 +74,7 @@
     edit-event-html="vm.editEventHtml"
     delete-event-html="vm.deleteEventHtml"
     custom-template-urls="vm.customTemplateUrls"
+    cell-modifier="vm.cellModifier"
     ng-switch-when="day">
   </mwl-calendar-day>
 </div>

src/templates/calendarDayView.html

@@ -37,7 +37,8 @@
       on-date-range-select="vm.onDateRangeSelect"
       on-event-times-changed="vm.onEventTimesChanged"
       view-date="vm.viewDate"
-      custom-template-urls="vm.customTemplateUrls">
+      custom-template-urls="vm.customTemplateUrls"
+      cell-modifier="vm.cellModifier">
     </mwl-calendar-hour-list>
 
     <div

src/templates/calendarHourList.html

@@ -5,9 +5,9 @@
     <div
       class="cal-day-hour-part"
       ng-repeat="segment in hour.segments track by $index"
-      ng-class="{ 'cal-day-hour-part-selected': vm.dateRangeSelect &&
+      ng-class="[{ 'cal-day-hour-part-selected': vm.dateRangeSelect &&
                 vm.dateRangeSelect.startDate <= vm.getClickedDate(segment.date, vm.dayViewSplit * $index) &&
-                vm.getClickedDate(segment.date, vm.dayViewSplit * $index) < vm.dateRangeSelect.endDate }"
+                vm.getClickedDate(segment.date, vm.dayViewSplit * $index) < vm.dateRangeSelect.endDate }, segment.cssClass]"
       ng-click="vm.onTimespanClick({calendarDate: vm.getClickedDate(segment.date, vm.dayViewSplit * $index)})"
       mwl-droppable
       on-drop="vm.eventDropped(dropData.event, vm.getClickedDate(segment.date, vm.dayViewSplit * $index))"
@@ -33,9 +33,9 @@
         class="cal-day-hour-part-spacer"
         ng-repeat="dayIndex in [0, 1, 2, 3, 4, 5, 6]"
         ng-style="{width: vm.dayWidth + 'px'}"
-        ng-class="{ 'cal-day-hour-part-selected': vm.dateRangeSelect &&
+        ng-class="[{ 'cal-day-hour-part-selected': vm.dateRangeSelect &&
                 vm.dateRangeSelect.startDate <= vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, dayIndex) &&
-                vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, dayIndex) < vm.dateRangeSelect.endDate }"
+                vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, dayIndex) < vm.dateRangeSelect.endDate }, segment.cssClass]"
         ng-click="vm.onTimespanClick({calendarDate: vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, dayIndex)})"
         mwl-droppable
         on-drop="vm.eventDropped(dropData.event, vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, dayIndex))"

src/templates/calendarWeekView.html

@@ -39,6 +39,7 @@
       on-timespan-click="vm.onTimespanClick"
       on-date-range-select="vm.onDateRangeSelect"
       custom-template-urls="vm.customTemplateUrls"
+      cell-modifier="vm.cellModifier"
       ng-if="vm.showTimes">
     </mwl-calendar-hour-list>
 

test/unit/directives/mwlCalendarDay.spec.js

@@ -20,6 +20,7 @@ describe('mwlCalendarDay directive', function() {
       'day-view-start="dayViewStart" ' +
       'day-view-end="dayViewEnd" ' +
       'day-view-split="dayViewSplit || 30" ' +
+      'cell-modifier="cellModifier"' +
     '></mwl-calendar-day>';
   var calendarDay = new Date(2015, 4, 1);
 
@@ -29,6 +30,7 @@ describe('mwlCalendarDay directive', function() {
     vm.dayViewStart = '06:00';
     vm.dayViewEnd = '22:59';
     vm.dayViewsplit = 30;
+    vm.cellModifier = sinon.spy();
     vm.events = [
       {
         $id: 0,

test/unit/directives/mwlCalendarHourList.spec.js

@@ -17,13 +17,15 @@ describe('mwlCalendarHourList directive', function() {
         'day-view-end="dayViewEnd" ' +
         'day-view-split="dayViewSplit || 30" ' +
         'on-event-times-changed="eventDropped(calendarEvent, calendarDate, calendarNewEventStart, calendarNewEventEnd)" ' +
+        'cell-modifier="cellModifier"' +
       '></mwl-calendar-hour-list>';
 
   function prepareScope(vm) {
     //These variables MUST be set as a minimum for the calendar to work
     vm.dayViewStart = '06:00';
     vm.dayViewEnd = '22:59';
     vm.dayViewsplit = 30;
+    vm.cellModifier = sinon.stub();
 
     showModal = sinon.spy();
 
@@ -145,4 +147,16 @@ describe('mwlCalendarHourList directive', function() {
     expect(MwlCalendarCtrl.dateRangeSelect).to.be.undefined;
   });
 
+  it('should allow the hour segments to have their CSS class overridden', function() {
+    sinon.stub(moment, 'locale').returns('another locale');
+    scope.cellModifier = function(args) {
+      args.calendarCell.cssClass = 'foo';
+    };
+    scope.$apply();
+    scope.$broadcast('calendar.refreshView');
+    scope.$apply();
+    expect(element[0].querySelector('.cal-day-hour-part.foo')).to.be.ok;
+    moment.locale.restore();
+  });
+
 });