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

README.md

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

src/directives/mwlCalendar.js

@@ -139,7 +139,8 @@ angular
         cellModifier: '&',
         dayViewStart: '@',
         dayViewEnd: '@',
-        dayViewSplit: '@'
+        dayViewSplit: '@',
+        dayViewEventChunkSize: '@'
       },
       controller: 'MwlCalendarCtrl as vm',
       bindToController: true

src/directives/mwlCalendarDay.js

@@ -87,7 +87,8 @@ angular
         onDateRangeSelect: '=',
         dayViewStart: '=',
         dayViewEnd: '=',
-        dayViewSplit: '='
+        dayViewSplit: '=',
+        dayViewEventChunkSize: '='
       },
       controller: 'MwlCalendarDayCtrl as vm',
       bindToController: true

src/directives/mwlCalendarWeek.js

@@ -94,6 +94,7 @@ angular
         dayViewStart: '=',
         dayViewEnd: '=',
         dayViewSplit: '=',
+        dayViewEventChunkSize: '=',
         onTimespanClick: '='
       },
       controller: 'MwlCalendarWeekCtrl as vm',

src/directives/mwlDraggable.js

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

src/directives/mwlResizable.js

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

src/templates/calendar.html

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

src/templates/calendarDayView.html

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

src/templates/calendarWeekView.html

@@ -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:;"

test/unit/directives/mwlDraggable.spec.js

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

test/unit/directives/mwlResizable.spec.js

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