From dd4a3d3c3e8f6ec094c93493e2e861ea7bf862b2 Mon Sep 17 00:00:00 2001 From: ChipsetSV Date: Wed, 4 May 2016 17:50:08 +0300 Subject: [PATCH] feat(functionality): Add function for selecting range on day view. --- README.md | 4 +++ docs/examples/examples.json | 3 ++ docs/examples/select-range/javascript.js | 17 ++++++++++ docs/examples/select-range/markup.html | 14 +++++++++ src/directives/mwlCalendar.js | 1 + src/directives/mwlCalendarDay.js | 1 + src/directives/mwlCalendarHourList.js | 40 +++++++++++++++++++++++- src/less/day.less | 4 +++ src/templates/calendar.html | 1 + src/templates/calendarDayView.html | 1 + src/templates/calendarHourList.html | 11 ++++++- 11 files changed, 95 insertions(+), 2 deletions(-) create mode 100644 docs/examples/select-range/javascript.js create mode 100644 docs/examples/select-range/markup.html diff --git a/README.md b/README.md index cb5c8713..958b22b3 100644 --- a/README.md +++ b/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`. diff --git a/docs/examples/examples.json b/docs/examples/examples.json index 87cf7b76..bcb98089 100644 --- a/docs/examples/examples.json +++ b/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" diff --git a/docs/examples/select-range/javascript.js b/docs/examples/select-range/javascript.js new file mode 100644 index 00000000..ef2b7f3b --- /dev/null +++ b/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; + }; + + }); diff --git a/docs/examples/select-range/markup.html b/docs/examples/select-range/markup.html new file mode 100644 index 00000000..a484c8c8 --- /dev/null +++ b/docs/examples/select-range/markup.html @@ -0,0 +1,14 @@ +
+ + Select range on a day on the view. + You selected on this day: from {{ vm.firstDateClicked | date:'medium' }} to {{ vm.lastDateClicked | date:'medium' }} + + + + +
diff --git a/src/directives/mwlCalendar.js b/src/directives/mwlCalendar.js index bcc73102..623ac680 100644 --- a/src/directives/mwlCalendar.js +++ b/src/directives/mwlCalendar.js @@ -134,6 +134,7 @@ angular onEditEventClick: '&', onDeleteEventClick: '&', onTimespanClick: '&', + onSelectRange: '&?', onViewChangeClick: '&', cellModifier: '&', dayViewStart: '@', diff --git a/src/directives/mwlCalendarDay.js b/src/directives/mwlCalendarDay.js index 6620a64e..b9b3fd58 100644 --- a/src/directives/mwlCalendarDay.js +++ b/src/directives/mwlCalendarDay.js @@ -84,6 +84,7 @@ angular onEventClick: '=', onEventTimesChanged: '=', onTimespanClick: '=', + onSelectRange: '=', dayViewStart: '=', dayViewEnd: '=', dayViewSplit: '=' diff --git a/src/directives/mwlCalendarHourList.js b/src/directives/mwlCalendarHourList.js index 2ba0350e..effc167d 100644 --- a/src/directives/mwlCalendarHourList.js +++ b/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 diff --git a/src/less/day.less b/src/less/day.less index ce8445b6..dbfab6be 100755 --- a/src/less/day.less +++ b/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 { diff --git a/src/templates/calendar.html b/src/templates/calendar.html index db0562aa..82469aa2 100644 --- a/src/templates/calendar.html +++ b/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" diff --git a/src/templates/calendarDayView.html b/src/templates/calendarDayView.html index e5c55ef6..a9a736ad 100644 --- a/src/templates/calendarDayView.html +++ b/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"> diff --git a/src/templates/calendarHourList.html b/src/templates/calendarHourList.html index 13e5aad3..bca994b8 100644 --- a/src/templates/calendarHourList.html +++ b/src/templates/calendarHourList.html @@ -4,10 +4,14 @@
@@ -16,8 +20,13 @@
+ ng-if="vm.dayWidth" + >