Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

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
  • Loading branch information...
Matt Lewis
Matt Lewis committed Aug 9, 2016
1 parent a3ff9c9 commit 835f17bfe48af2535d86039b2cd07770b13f0db0
@@ -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

@@ -105,7 +105,8 @@ angular
onDeleteEventClick: '=',
editEventHtml: '=',
deleteEventHtml: '=',
customTemplateUrls: '=?'
customTemplateUrls: '=?',
cellModifier: '='
},
controller: 'MwlCalendarDayCtrl as vm',
bindToController: true
@@ -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
};
@@ -97,7 +97,8 @@ angular
dayViewEventChunkSize: '=',
onTimespanClick: '=',
onDateRangeSelect: '=',
customTemplateUrls: '=?'
customTemplateUrls: '=?',
cellModifier: '='
},
controller: 'MwlCalendarWeekCtrl as vm',
link: function(scope, element, attrs, calendarCtrl) {
@@ -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>
@@ -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
@@ -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))"
@@ -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>

@@ -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,
@@ -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();
});

});

0 comments on commit 835f17b

Please sign in to comment.
You can’t perform that action at this time.