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

feat(dayViewEventChunkSize): add `day-view-event-chunk-size` option

Allows the drag and resize chunk size of events to be customised from the default of 30 minutes

Closes #320
  • Loading branch information...
Matt Lewis
Matt Lewis committed May 12, 2016
1 parent b9918cb commit ef2f32752f566d1c631077a9d17f59217c3f6466
@@ -184,6 +184,10 @@ An interpolated string in the form of hh:mm to end the day view at, e.g. setting

The number of chunks to split the day view hours up into. Can be either 10, 15 or 30. Default: 30

### day-view-event-chunk-size

The number of pixels to "snap" event drag and resizes to. Default: 30

### on-view-change-click

An optional expression that is evaluated when the view is changed by clicking on a date. Return false from the expression function to disable the view change. `calendarDate` can be used in the expression and contains the date that was selected. `calendarNextView` is the view that the calendar will be changed to.
@@ -139,7 +139,8 @@ angular
cellModifier: '&',
dayViewStart: '@',
dayViewEnd: '@',
dayViewSplit: '@'
dayViewSplit: '@',
dayViewEventChunkSize: '@'
},
controller: 'MwlCalendarCtrl as vm',
bindToController: true
@@ -87,7 +87,8 @@ angular
onDateRangeSelect: '=',
dayViewStart: '=',
dayViewEnd: '=',
dayViewSplit: '='
dayViewSplit: '=',
dayViewEventChunkSize: '='
},
controller: 'MwlCalendarDayCtrl as vm',
bindToController: true
@@ -94,6 +94,7 @@ angular
dayViewStart: '=',
dayViewEnd: '=',
dayViewSplit: '=',
dayViewEventChunkSize: '=',
onTimespanClick: '='
},
controller: 'MwlCalendarWeekCtrl as vm',
@@ -27,22 +27,6 @@ angular
.css('transform', transformValue);
}

function getUnitsMoved(x, y, gridDimensions) {

var result = {x: x, y: y};

if (gridDimensions && gridDimensions.x) {
result.x /= gridDimensions.x;
}

if (gridDimensions && gridDimensions.y) {
result.y /= gridDimensions.y;
}

return result;

}

interact($element[0]).draggable({
snap: snap,
onstart: function(event) {
@@ -82,7 +66,7 @@ angular
.attr('data-y', y);

if ($attrs.onDrag) {
$parse($attrs.onDrag)($scope, getUnitsMoved(x, y, snapGridDimensions));
$parse($attrs.onDrag)($scope, {x: x, y: y});
$scope.$apply();
}

@@ -95,7 +79,7 @@ angular

event.target.style.pointerEvents = 'auto';
if ($attrs.onDragEnd) {
$parse($attrs.onDragEnd)($scope, getUnitsMoved(x, y, snapGridDimensions));
$parse($attrs.onDragEnd)($scope, {x: x, y: y});
$scope.$apply();
}

@@ -24,7 +24,7 @@ angular
var originalDimensionsStyle = {};
var resizeEdge;

function getUnitsResized(edge, elm, gridDimensions) {
function getUnitsResized(edge, elm) {
var unitsResized = {};
unitsResized.edge = edge;
if (edge === 'start') {
@@ -34,12 +34,6 @@ angular
unitsResized.x = parseFloat(elm.css('width').replace('px', '')) - originalDimensions.width;
unitsResized.y = parseFloat(elm.css('height').replace('px', '')) - originalDimensions.height;
}
if (gridDimensions && gridDimensions.x) {
unitsResized.x = Math.round(unitsResized.x / gridDimensions.x);
}
if (gridDimensions && gridDimensions.y) {
unitsResized.y = Math.round(unitsResized.y / gridDimensions.y);
}
return unitsResized;
}

@@ -82,7 +76,7 @@ angular
}

if ($attrs.onResize) {
$parse($attrs.onResize)($scope, getUnitsResized(resizeEdge, elm, snapGridDimensions));
$parse($attrs.onResize)($scope, getUnitsResized(resizeEdge, elm));
$scope.$apply();
}

@@ -92,7 +86,7 @@ angular
onend: function(event) {

var elm = angular.element(event.target);
var unitsResized = getUnitsResized(resizeEdge, elm, snapGridDimensions);
var unitsResized = getUnitsResized(resizeEdge, elm);

$timeout(function() {
elm
@@ -47,6 +47,7 @@
day-view-start="vm.dayViewStart"
day-view-end="vm.dayViewEnd"
day-view-split="vm.dayViewSplit"
day-view-event-chunk-size="vm.dayViewEventChunkSize"
on-timespan-click="vm.onTimespanClick"
ng-switch-when="week">
</mwl-calendar-week>
@@ -61,6 +62,7 @@
day-view-start="vm.dayViewStart"
day-view-end="vm.dayViewEnd"
day-view-split="vm.dayViewSplit"
day-view-event-chunk-size="vm.dayViewEventChunkSize"
ng-switch-when="day">
</mwl-calendar-day>
</div>
@@ -18,13 +18,13 @@
ng-style="{top: event.top + 'px', left: event.left + 60 + 'px', height: event.height + 'px'}"
mwl-draggable="event.draggable === true"
axis="'xy'"
snap-grid="{y: 30, x: 50}"
on-drag="vm.eventDragged(event, y)"
on-drag-end="vm.eventDragComplete(event, y)"
snap-grid="{y: vm.dayViewEventChunkSize || 30, x: 50}"
on-drag="vm.eventDragged(event, y / 30)"
on-drag-end="vm.eventDragComplete(event, y / 30)"
mwl-resizable="event.resizable === true && event.endsAt"
resize-edges="{top: true, bottom: true}"
on-resize="vm.eventResized(event, edge, y)"
on-resize-end="vm.eventResizeComplete(event, edge, y)">
on-resize="vm.eventResized(event, edge, y / 30)"
on-resize-end="vm.eventResizeComplete(event, edge, y / 30)">

<span class="cal-hours">
<span ng-show="event.top == 0"><span ng-bind="(event.tempStartsAt || event.startsAt) | calendarDate:'day':true"></span>, </span>
@@ -56,12 +56,12 @@
data-event-class
mwl-draggable="event.draggable === true"
axis="vm.showTimes ? 'xy' : 'x'"
snap-grid="vm.showTimes ? {x: vm.dayColumnDimensions.width, y: 30} : {x: vm.dayColumnDimensions.width}"
on-drag="vm.tempTimeChanged(event, y)"
on-drag-end="vm.weekDragged(event, x, y)"
snap-grid="vm.showTimes ? {x: vm.dayColumnDimensions.width, y: vm.dayViewEventChunkSize || 30} : {x: vm.dayColumnDimensions.width}"
on-drag="vm.tempTimeChanged(event, y / 30)"
on-drag-end="vm.weekDragged(event, x / vm.dayColumnDimensions.width, y / 30)"
mwl-resizable="event.resizable === true && event.endsAt && !vm.showTimes"
resize-edges="{left: true, right: true}"
on-resize-end="vm.weekResized(event, edge, x)">
on-resize-end="vm.weekResized(event, edge, x / vm.dayColumnDimensions.width)">
<strong ng-bind="(event.tempStartsAt || event.startsAt) | calendarDate:'time':true" ng-show="vm.showTimes"></strong>
<a
href="javascript:;"
@@ -19,8 +19,8 @@ describe('mwlDraggable directive', function() {
'axis="\'y\'" ' +
'snap-grid="{x: 30, y: 30}" ' +
'on-drag-start="onDragStart()" ' +
'on-drag-end="onDragEnd(x, y)" ' +
'on-drag="onDrag(x, y)" ' +
'on-drag-end="onDragEnd(x / 30, y / 30)" ' +
'on-drag="onDrag(x / 30, y / 30)" ' +
'drop-data="dropData"' +
'></div>';

@@ -17,8 +17,8 @@ describe('mwlresizable directive', function() {
'snap-grid="{y: 30}" ' +
'resize-edges="{top: true, bottom: true}" ' +
'on-resize-start="onResizeStart()" ' +
'on-resize-end="onResizeEnd(x, y)" ' +
'on-resize="onResize(x, y)" ' +
'on-resize-end="onResizeEnd(x, y / 30)" ' +
'on-resize="onResize(x, y / 30)" ' +
'></div>';

function prepareScope(vm) {

0 comments on commit ef2f327

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