From 835f17bfe48af2535d86039b2cd07770b13f0db0 Mon Sep 17 00:00:00 2001 From: Matt Lewis Date: Tue, 9 Aug 2016 08:01:15 +0100 Subject: [PATCH] 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 | 2 +- src/directives/mwlCalendarDay.js | 3 ++- src/directives/mwlCalendarHourList.js | 9 ++++++++- src/directives/mwlCalendarWeek.js | 3 ++- src/templates/calendar.html | 2 ++ src/templates/calendarDayView.html | 3 ++- src/templates/calendarHourList.html | 8 ++++---- src/templates/calendarWeekView.html | 1 + test/unit/directives/mwlCalendarDay.spec.js | 2 ++ test/unit/directives/mwlCalendarHourList.spec.js | 14 ++++++++++++++ 10 files changed, 38 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 6a6cd088..df555129 100644 --- a/README.md +++ b/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 diff --git a/src/directives/mwlCalendarDay.js b/src/directives/mwlCalendarDay.js index d96d63bb..c712483d 100644 --- a/src/directives/mwlCalendarDay.js +++ b/src/directives/mwlCalendarDay.js @@ -105,7 +105,8 @@ angular onDeleteEventClick: '=', editEventHtml: '=', deleteEventHtml: '=', - customTemplateUrls: '=?' + customTemplateUrls: '=?', + cellModifier: '=' }, controller: 'MwlCalendarDayCtrl as vm', bindToController: true diff --git a/src/directives/mwlCalendarHourList.js b/src/directives/mwlCalendarHourList.js index 412829dc..a3658a98 100644 --- a/src/directives/mwlCalendarHourList.js +++ b/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 }; diff --git a/src/directives/mwlCalendarWeek.js b/src/directives/mwlCalendarWeek.js index 2f04130d..94d1fdd4 100644 --- a/src/directives/mwlCalendarWeek.js +++ b/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) { diff --git a/src/templates/calendar.html b/src/templates/calendar.html index d6ad8699..f257c0e3 100644 --- a/src/templates/calendar.html +++ b/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"> @@ -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"> diff --git a/src/templates/calendarDayView.html b/src/templates/calendarDayView.html index 5e20ca0f..cdee97e7 100644 --- a/src/templates/calendarDayView.html +++ b/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">
diff --git a/test/unit/directives/mwlCalendarDay.spec.js b/test/unit/directives/mwlCalendarDay.spec.js index dd71dccd..9d42402b 100644 --- a/test/unit/directives/mwlCalendarDay.spec.js +++ b/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"' + '>'; 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, diff --git a/test/unit/directives/mwlCalendarHourList.spec.js b/test/unit/directives/mwlCalendarHourList.spec.js index ac070768..b7c4f581 100644 --- a/test/unit/directives/mwlCalendarHourList.spec.js +++ b/test/unit/directives/mwlCalendarHourList.spec.js @@ -17,6 +17,7 @@ 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"' + '>'; function prepareScope(vm) { @@ -24,6 +25,7 @@ describe('mwlCalendarHourList directive', function() { 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(); + }); + });