feat(functionality): Add function for selecting range on day view.

README.md

@@ -164,6 +164,10 @@ This expression is called when an event delete link is clicked on the calendar.
 
 This expression is called when a month, day or hour on the calendar is clicked on the year, month and day views respectively. `calendarDate` can be used in the expression and contains the start of the month, day or hour that was clicked on. If on the month or year view `calendarCell` will contain cell data for the clicked day or month which you can then modify.
 
+### on-select-range
+
+This expression is called when a range of hours selected on the day view respectively. `startDate` can be used in the expression and contains the start of the range, `endDate` can be used in the expression and contains the end of the range.
+
 ### cell-is-open
 
 A 2 way bound variable that when set to true will open the year or month view cell that corresponds to the date passed to the date object passed to `view-date`.

docs/examples/examples.json

@@ -28,6 +28,9 @@
 }, {
   "key": "timespan-click",
   "label": "Timespan click"
+}, {
+  "key": "select-range",
+  "label": "Select range"
 }, {
   "key": "cell-is-open",
   "label": "Slidebox is open"

docs/examples/select-range/javascript.js

@@ -0,0 +1,17 @@
+angular
+  .module('mwl.calendar.docs')
+  .controller('SelectRangeCtrl', function(moment) {
+
+    var vm = this;
+
+    vm.events = [];
+    vm.calendarView = 'day';
+    vm.viewDate = moment().startOf('month').toDate();
+    vm.isCellOpen = true;
+
+    vm.rangeSelected = function(startDate, endDate) {
+      vm.firstDateClicked = startDate;
+      vm.lastDateClicked = endDate;
+    };
+
+  });

docs/examples/select-range/markup.html

@@ -0,0 +1,14 @@
+<div ng-controller="SelectRangeCtrl as vm">
+  <uib-alert type="info">
+    Select range on a day on the view.
+    <strong ng-show="vm.lastDateClicked">You selected on this day: from {{ vm.firstDateClicked | date:'medium' }} to {{ vm.lastDateClicked | date:'medium' }}</strong>
+  </uib-alert>
+  <ng-include src="'calendarControls.html'"></ng-include>
+  <mwl-calendar
+    events="vm.events"
+    view="vm.calendarView"
+    view-date="vm.viewDate"
+    cell-is-open="vm.isCellOpen"
+    on-select-range="vm.rangeSelected(startDate, endDate)">
+  </mwl-calendar>
+</div>

src/directives/mwlCalendar.js

@@ -134,6 +134,7 @@ angular
         onEditEventClick: '&',
         onDeleteEventClick: '&',
         onTimespanClick: '&',
+        onSelectRange: '&?',
         onViewChangeClick: '&',
         cellModifier: '&',
         dayViewStart: '@',

src/directives/mwlCalendarDay.js

@@ -84,6 +84,7 @@ angular
         onEventClick: '=',
         onEventTimesChanged: '=',
         onTimespanClick: '=',
+        onSelectRange: '=',
         dayViewStart: '=',
         dayViewEnd: '=',
         dayViewSplit: '='

src/directives/mwlCalendarHourList.js

@@ -4,7 +4,7 @@ var angular = require('angular');
 
 angular
   .module('mwl.calendar')
-  .controller('MwlCalendarHourListCtrl', function($scope, $attrs, moment, calendarConfig, calendarHelper) {
+  .controller('MwlCalendarHourListCtrl', function($scope, $attrs, moment, calendarConfig, calendarHelper, $parse, interact) {
     var vm = this;
     var dayViewStart, dayViewEnd;
 
@@ -74,6 +74,43 @@ angular
       return moment(baseDate).clone().add(minutes, 'minutes').add(days || 0, 'days').toDate();
     };
 
+    if (interact && vm.onSelectRange) {
+      vm.select = {};
+      vm.select.active = false;
+      interact('.cal-day-hour-part').on('down', function(event) {
+        if (!vm.select.active) {
+          vm.select.active = true;
+          var date = $parse(event.target.attributes['current-value'].value)($scope);
+          vm.select.startDate = date;
+          vm.select.endDate = date;
+          $scope.$apply();
+        }
+        event.preventDefault();
+      });
+
+      interact('.cal-day-hour-part').on('up', function(event) {
+        if (vm.select.active) {
+          vm.select.active = false;
+          var date = $parse(event.target.attributes['current-value'].value)($scope);
+          vm.select.endDate = vm.getClickedDate(date, vm.dayViewSplit);
+          if (vm.select.endDate > vm.select.startDate) {
+            vm.onSelectRange({startDate: vm.select.startDate, endDate: vm.select.endDate});
+            //vm.onTimespanClick({calendarDate: vm.select.startDate});
+          }
+          $scope.$apply();
+        }
+        event.preventDefault();
+      });
+
+      interact('.cal-day-hour-part').on('move', function(event) {
+        if (vm.select.active) {
+          var date = $parse(event.target.attributes['current-value'].value)($scope);
+          vm.select.endDate = vm.getClickedDate(date, vm.dayViewSplit);
+          $scope.$apply();
+        }
+        event.preventDefault();
+      });
+    }
   })
   .directive('mwlCalendarHourList', function(calendarConfig) {
 
@@ -88,6 +125,7 @@ angular
         dayViewSplit: '=',
         dayWidth: '=?',
         onTimespanClick: '=',
+        onSelectRange: '=',
         onEventTimesChanged: '='
       },
       bindToController: true

src/less/day.less

@@ -21,6 +21,10 @@
       display: inline-block;
     }
 
+    &:hover { background-color: @dayHover; }
+  }
+  .cal-day-hour-part-selected {
+    background-color: @borderColor;
   }
   .cal-day-hour {
     .day-highlight {

src/templates/calendar.html

@@ -57,6 +57,7 @@
     on-event-click="vm.onEventClick"
     on-event-times-changed="vm.onEventTimesChanged"
     on-timespan-click="vm.onTimespanClick"
+    on-select-range="vm.onSelectRange"
     day-view-start="vm.dayViewStart"
     day-view-end="vm.dayViewEnd"
     day-view-split="vm.dayViewSplit"

src/templates/calendarDayView.html

@@ -6,6 +6,7 @@
       day-view-end="vm.dayViewEnd"
       day-view-split="vm.dayViewSplit"
       on-timespan-click="vm.onTimespanClick"
+      on-select-range="vm.onSelectRange"
       on-event-times-changed="vm.onEventTimesChanged"
       view-date="vm.viewDate">
     </mwl-calendar-hour-list>

src/templates/calendarHourList.html

@@ -4,10 +4,14 @@
 
     <div
       class="cal-day-hour-part"
+      ng-class="{ 'cal-day-hour-part-selected': vm.select.active &&
+                vm.select.startDate <= vm.getClickedDate(hour.date, vm.dayViewSplit * $index) &&
+                vm.getClickedDate(hour.date, vm.dayViewSplit * $index) < vm.select.endDate }"
       ng-repeat="chunk in vm.hourChunks track by chunk"
       ng-click="vm.onTimespanClick({calendarDate: vm.getClickedDate(hour.date, vm.dayViewSplit * $index)})"
       mwl-droppable
       on-drop="vm.eventDropped(dropData.event, vm.getClickedDate(hour.date, vm.dayViewSplit * $index))"
+      current-value="vm.getClickedDate({{hour.date}}, {{vm.dayViewSplit}} * {{$index}})"
       ng-if="!vm.dayWidth">
       <div class="cal-day-hour-part-time">
         <strong ng-bind="hour.label" ng-show="$first"></strong>
@@ -16,8 +20,13 @@
 
     <div
       class="cal-day-hour-part"
+      ng-class="{ 'cal-day-hour-part-selected': vm.select.active &&
+                vm.select.startDate <= vm.getClickedDate(hour.date, vm.dayViewSplit * $index) &&
+                vm.getClickedDate(hour.date, vm.dayViewSplit * $index) < vm.select.endDate }"
+      current-value="vm.getClickedDate({{hour.date}}, {{vm.dayViewSplit}} * {{$index}})"
       ng-repeat="chunk in vm.hourChunks track by chunk"
-      ng-if="vm.dayWidth">
+      ng-if="vm.dayWidth"
+      >
       <div class="cal-day-hour-part-time">
         <strong ng-bind="hour.label" ng-show="$first"></strong>
       </div>