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

…eek view with times

Closes #366

src/directives/mwlCalendarHourList.js

@@ -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) {

src/directives/mwlCalendarWeek.js

@@ -95,7 +95,8 @@ angular
         dayViewEnd: '=',
         dayViewSplit: '=',
         dayViewEventChunkSize: '=',
-        onTimespanClick: '='
+        onTimespanClick: '=',
+        onDateRangeSelect: '='
       },
       controller: 'MwlCalendarWeekCtrl as vm',
       link: function(scope, element, attrs, calendarCtrl) {

src/templates/calendar.html

@@ -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>
 

src/templates/calendarHourList.html

@@ -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>
 

src/templates/calendarWeekView.html

@@ -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>
 

test/unit/directives/mwlCalendarHourList.spec.js

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