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

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

  • Loading branch information...
ChipsetSV committed May 4, 2016
1 parent c56a406 commit dd4a3d3c3e8f6ec094c93493e2e861ea7bf862b2
@@ -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`.
@@ -28,6 +28,9 @@
}, {
"key": "timespan-click",
"label": "Timespan click"
}, {
"key": "select-range",
"label": "Select range"
}, {
"key": "cell-is-open",
"label": "Slidebox is open"
@@ -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;
};

});
@@ -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>
@@ -134,6 +134,7 @@ angular
onEditEventClick: '&',
onDeleteEventClick: '&',
onTimespanClick: '&',
onSelectRange: '&?',
onViewChangeClick: '&',
cellModifier: '&',
dayViewStart: '@',
@@ -84,6 +84,7 @@ angular
onEventClick: '=',
onEventTimesChanged: '=',
onTimespanClick: '=',
onSelectRange: '=',
dayViewStart: '=',
dayViewEnd: '=',
dayViewSplit: '='
@@ -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
@@ -21,6 +21,10 @@
display: inline-block;
}

&:hover { background-color: @dayHover; }
}
.cal-day-hour-part-selected {
background-color: @borderColor;
}
.cal-day-hour {
.day-highlight {
@@ -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"
@@ -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>
@@ -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>

0 comments on commit dd4a3d3

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