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

feat(onDateRangeSelect): support dragd and selecting a range on the w…

…eek view with times

Closes #366
  • Loading branch information...
Matt Lewis
Matt Lewis committed Jun 26, 2016
1 parent a8ad01a commit 1efeee0ec618561c734a027bf7d94a510c3aced5
@@ -74,11 +74,15 @@ angular
return moment(baseDate).clone().add(minutes, 'minutes').add(days || 0, 'days').toDate();
};

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

vm.onDragSelectMove = function(date) {
@@ -95,7 +95,8 @@ angular
dayViewEnd: '=',
dayViewSplit: '=',
dayViewEventChunkSize: '=',
onTimespanClick: '='
onTimespanClick: '=',
onDateRangeSelect: '='
},
controller: 'MwlCalendarWeekCtrl as vm',
link: function(scope, element, attrs, calendarCtrl) {
@@ -49,6 +49,7 @@
day-view-split="vm.dayViewSplit"
day-view-event-chunk-size="vm.dayViewEventChunkSize"
on-timespan-click="vm.onTimespanClick"
on-date-range-select="vm.onDateRangeSelect"
ng-switch-when="week">
</mwl-calendar-week>

@@ -27,14 +27,22 @@
ng-if="vm.dayWidth">
<div class="cal-day-hour-part-time">
<strong ng-bind="hour.label" ng-show="$first"></strong>
&nbsp;
</div>
<div
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 &&
vm.dateRangeSelect.startDate <= vm.getClickedDate(hour.date, vm.dayViewSplit * $parent.$index, dayIndex) &&
vm.getClickedDate(hour.date, vm.dayViewSplit * $parent.$index, dayIndex) < vm.dateRangeSelect.endDate }"
ng-click="vm.onTimespanClick({calendarDate: vm.getClickedDate(hour.date, vm.dayViewSplit * $parent.$index, dayIndex)})"
mwl-droppable
on-drop="vm.eventDropped(dropData.event, vm.getClickedDate(hour.date, vm.dayViewSplit * $parent.$index, dayIndex))">
on-drop="vm.eventDropped(dropData.event, vm.getClickedDate(hour.date, vm.dayViewSplit * $parent.$index, dayIndex))"
mwl-drag-select="!!vm.onDateRangeSelect"
on-drag-select-start="vm.onDragSelectStart(vm.getClickedDate(hour.date, vm.dayViewSplit * $parent.$index, dayIndex), dayIndex)"
on-drag-select-move="vm.onDragSelectMove(vm.getClickedDate(hour.date, vm.dayViewSplit * ($parent.$index + 1), vm.dateRangeSelect.dayIndex))"
on-drag-select-end="vm.onDragSelectEnd(vm.getClickedDate(hour.date, vm.dayViewSplit * ($parent.$index + 1), vm.dateRangeSelect.dayIndex))">
</div>
</div>

@@ -37,6 +37,7 @@
day-width="vm.dayColumnDimensions.width"
view-date="vm.viewDate"
on-timespan-click="vm.onTimespanClick"
on-date-range-select="vm.onDateRangeSelect"
ng-if="vm.showTimes">
</mwl-calendar-hour-list>

@@ -85,10 +85,12 @@ describe('mwlCalendarHourList directive', function() {
it('should initialise the date range select', function() {

var date = new Date();
MwlCalendarCtrl.onDragSelectStart(date);
MwlCalendarCtrl.onDragSelectStart(date, 1);
expect(MwlCalendarCtrl.dateRangeSelect).to.deep.equal({
active: true,
startDate: date,
endDate: date
endDate: date,
dayIndex: 1
});

});

0 comments on commit 1efeee0

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