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

fix(weekViewWithTimes): call the cell-modifier for each days hour seg…

…ment

BREAKING CHANGE:
The `cell-modifier` will now be called for every days hour segment instead of just the first day in the week.

The cssClass added will now be added on the segments day column instead of on the entire row.

The structure of the week view with times template has also changed slightly if using a custom template

Closes #424
  • Loading branch information...
Matt Lewis
Matt Lewis committed Aug 21, 2016
1 parent 8c3efa7 commit 29725a80e3ae61ce2073c0e663cff978575c6a00
@@ -5,7 +5,7 @@ var calendarUtils = require('calendar-utils');

angular
.module('mwl.calendar')
.controller('MwlCalendarHourListCtrl', function($scope, $attrs, moment, calendarHelper) {
.controller('MwlCalendarHourListCtrl', function($scope, moment, calendarHelper, calendarConfig) {
var vm = this;

function updateDays() {
@@ -14,7 +14,7 @@ angular
var dayStart = (vm.dayViewStart || '00:00').split(':');
var dayEnd = (vm.dayViewEnd || '23:59').split(':');
vm.hourGrid = calendarUtils.getDayViewHourGrid({
viewDate: $attrs.dayWidth ? moment(vm.viewDate).startOf('week').toDate() : moment(vm.viewDate).toDate(),
viewDate: calendarConfig.showTimesOnWeekView ? moment(vm.viewDate).startOf('week').toDate() : moment(vm.viewDate).toDate(),
hourSegments: 60 / vm.dayViewSplit,
dayStart: {
hour: dayStart[0],
@@ -28,7 +28,22 @@ angular

vm.hourGrid.forEach(function(hour) {
hour.segments.forEach(function(segment) {
vm.cellModifier({calendarCell: segment});

if (calendarConfig.showTimesOnWeekView) {

segment.days = [];

for (var i = 0; i < 7; i++) {
var day = {
date: moment(segment.date).add(i, 'days')
};
vm.cellModifier({calendarCell: day});
segment.days.push(day);
}

} else {
vm.cellModifier({calendarCell: segment});
}
});
});

@@ -31,16 +31,16 @@
</div>
<div
class="cal-day-hour-part-spacer"
ng-repeat="dayIndex in [0, 1, 2, 3, 4, 5, 6]"
ng-repeat="day in segment.days track by $index"
ng-style="{width: vm.dayWidth + 'px'}"
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 }, segment.cssClass]"
ng-click="vm.onTimespanClick({calendarDate: vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, dayIndex)})"
vm.dateRangeSelect.startDate <= vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, $index) &&
vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, $index) < vm.dateRangeSelect.endDate }, day.cssClass]"
ng-click="vm.onTimespanClick({calendarDate: vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, $index)})"
mwl-droppable
on-drop="vm.eventDropped(dropData.event, vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, dayIndex))"
on-drop="vm.eventDropped(dropData.event, vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, $index))"
mwl-drag-select="!!vm.onDateRangeSelect"
on-drag-select-start="vm.onDragSelectStart(vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, dayIndex), dayIndex)"
on-drag-select-start="vm.onDragSelectStart(vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, $index), $index)"
on-drag-select-move="vm.onDragSelectMove(vm.getClickedDate(segment.date, vm.dayViewSplit * ($parent.$index + 1), vm.dateRangeSelect.dayIndex))"
on-drag-select-end="vm.onDragSelectEnd(vm.getClickedDate(segment.date, vm.dayViewSplit * ($parent.$index + 1), vm.dateRangeSelect.dayIndex))">
</div>
@@ -9,6 +9,7 @@ describe('mwlCalendarHourList directive', function() {
scope,
$rootScope,
directiveScope,
calendarConfig,
showModal,
clock,
template =
@@ -18,6 +19,7 @@ describe('mwlCalendarHourList directive', function() {
'day-view-split="dayViewSplit || 30" ' +
'on-event-times-changed="eventDropped(calendarEvent, calendarDate, calendarNewEventStart, calendarNewEventEnd)" ' +
'cell-modifier="cellModifier"' +
'day-width="dayWidth"' +
'></mwl-calendar-hour-list>';

function prepareScope(vm) {
@@ -40,7 +42,8 @@ describe('mwlCalendarHourList directive', function() {

beforeEach(angular.mock.module('mwl.calendar'));

beforeEach(angular.mock.inject(function($compile, _$rootScope_) {
beforeEach(angular.mock.inject(function($compile, _$rootScope_, _calendarConfig_) {
calendarConfig = _calendarConfig_;
clock = sinon.useFakeTimers(new Date('October 20, 2015 11:10:00').getTime());
$rootScope = _$rootScope_;
scope = $rootScope.$new();
@@ -155,8 +158,23 @@ describe('mwlCalendarHourList directive', function() {
scope.$apply();
scope.$broadcast('calendar.refreshView');
scope.$apply();
moment.locale.restore();
expect(element[0].querySelector('.cal-day-hour-part.foo')).to.be.ok;
});

it('should allow the week view with times day segments CSS classes to be customised', function() {
calendarConfig.showTimesOnWeekView = true;
scope.dayWidth = 50;
sinon.stub(moment, 'locale').returns('another locale');
scope.cellModifier = function(args) {
args.calendarCell.cssClass = 'foo';
};
scope.$apply();
scope.$broadcast('calendar.refreshView');
scope.$apply();
calendarConfig.showTimesOnWeekView = false;
moment.locale.restore();
expect(element[0].querySelector('.cal-day-hour-part-spacer.foo')).to.be.ok;
});

});

0 comments on commit 29725a8

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