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

feat(monthView): support on-date-range-select callback on the month view

Closes #391
  • Loading branch information...
Matt Lewis
Matt Lewis committed Jul 19, 2016
1 parent 247f2c1 commit fa3b02e92b814008ef6528c2d5b82568afc0b855
@@ -101,6 +101,32 @@ angular
}
};

vm.onDragSelectStart = function(day) {
if (!vm.dateRangeSelect) {
vm.dateRangeSelect = {
startDate: day.date,
endDate: day.date
};
}
};

vm.onDragSelectMove = function(day) {
if (vm.dateRangeSelect) {
vm.dateRangeSelect.endDate = day.date;
}
};

vm.onDragSelectEnd = function(day) {
vm.dateRangeSelect.endDate = day.date;
if (vm.dateRangeSelect.endDate > vm.dateRangeSelect.startDate) {
vm.onDateRangeSelect({
calendarRangeStartDate: vm.dateRangeSelect.startDate.clone().startOf('day').toDate(),
calendarRangeEndDate: vm.dateRangeSelect.endDate.clone().endOf('day').toDate()
});
}
delete vm.dateRangeSelect;
};

})
.directive('mwlCalendarMonth', function() {

@@ -115,6 +141,7 @@ angular
onEditEventClick: '=',
onDeleteEventClick: '=',
onEventTimesChanged: '=',
onDateRangeSelect: '=',
editEventHtml: '=',
deleteEventHtml: '=',
cellIsOpen: '=',
@@ -100,3 +100,7 @@
.cal-slide-content ul li.dragging-active .event-item {
color: black;
}

.cal-day-selected {
background-color: #ededed;
}
@@ -32,6 +32,7 @@
on-edit-event-click="vm.onEditEventClick"
on-delete-event-click="vm.onDeleteEventClick"
on-timespan-click="vm.onTimespanClick"
on-date-range-select="vm.onDateRangeSelect"
edit-event-html="vm.editEventHtml"
delete-event-html="vm.deleteEventHtml"
cell-is-open="vm.cellIsOpen"
@@ -1,14 +1,19 @@
<div
mwl-droppable
on-drop="vm.handleEventDrop(dropData.event, day.date, dropData.draggedFromDate)"
mwl-drag-select="!!vm.onDateRangeSelect"
on-drag-select-start="vm.onDragSelectStart(day)"
on-drag-select-move="vm.onDragSelectMove(day)"
on-drag-select-end="vm.onDragSelectEnd(day)"
class="cal-month-day {{ day.cssClass }}"
ng-class="{
'cal-day-outmonth': !day.inMonth,
'cal-day-inmonth': day.inMonth,
'cal-day-weekend': day.isWeekend,
'cal-day-past': day.isPast,
'cal-day-today': day.isToday,
'cal-day-future': day.isFuture
'cal-day-future': day.isFuture,
'cal-day-selected': vm.dateRangeSelect && vm.dateRangeSelect.startDate <= day.date && day.date <= vm.dateRangeSelect.endDate
}">

<small
@@ -192,4 +192,65 @@ describe('mwlCalendarMonth directive', function() {
expect(MwlCalendarCtrl.getWeekNumberLabel({date: moment().startOf('year').endOf('week').add(1, 'day')})).to.equal('My custom function 1');
});

it('should initialise the date range select', function() {

var date = moment();
MwlCalendarCtrl.onDragSelectStart({date: date});
expect(MwlCalendarCtrl.dateRangeSelect).to.deep.equal({
startDate: date,
endDate: date
});

});

it('should update the date ranges end date', function() {
var date = moment();
MwlCalendarCtrl.dateRangeSelect = {
startDate: 'date1',
endDate: 'date2'
};
MwlCalendarCtrl.onDragSelectMove({date: date});
expect(MwlCalendarCtrl.dateRangeSelect).to.deep.equal({
startDate: 'date1',
endDate: date
});
});

it('should not throw if there is no date range being selected', function() {
var date = moment();
MwlCalendarCtrl.dateRangeSelect = null;
expect(function() {
MwlCalendarCtrl.onDragSelectMove({date: date});
}).not.to.throw();
});

it('should call the onDateRangeSelect callback if there is a valid date range', function() {
MwlCalendarCtrl.onDateRangeSelect = sinon.spy();
var date1 = moment();
var date2 = moment().add(1, 'day');
MwlCalendarCtrl.dateRangeSelect = {
startDate: date1,
endDate: moment().add(1, 'second')
};
MwlCalendarCtrl.onDragSelectEnd({date: date2});
expect(MwlCalendarCtrl.onDateRangeSelect).to.have.been.calledWith({
calendarRangeStartDate: date1.startOf('day').toDate(),
calendarRangeEndDate: date2.endOf('day').toDate()
});
expect(MwlCalendarCtrl.dateRangeSelect).to.be.undefined;
});

it('should not call the onDateRangeSelect callback if there is an invalid date range', function() {
MwlCalendarCtrl.onDateRangeSelect = sinon.spy();
var date1 = moment();
var date2 = moment().subtract(1, 'day');
MwlCalendarCtrl.dateRangeSelect = {
startDate: date1,
endDate: moment().subtract(1, 'second')
};
MwlCalendarCtrl.onDragSelectEnd({date: date2});
expect(MwlCalendarCtrl.onDateRangeSelect).not.to.have.been.called;
expect(MwlCalendarCtrl.dateRangeSelect).to.be.undefined;
});

});

0 comments on commit fa3b02e

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