Add resizable and draggable options to events

README.md

@@ -112,8 +112,10 @@ $scope.events = [
     type: 'info', // The type of the event (determines its color). Can be important, warning, info, inverse, success or special
     startsAt: new Date(2013,5,1,1), // A javascript date object for when the event starts
     endsAt: new Date(2014,8,26,15), // Optional - a javascript date object for when the event ends
-    editable: false, // If edit-event-html is set and this field is explicitly set to false then dont make it editable. If set to false will also prevent the event from being dragged and dropped.
+    editable: false, // If edit-event-html is set and this field is explicitly set to false then dont make it editable.
     deletable: false, // If delete-event-html is set and this field is explicitly set to false then dont make it deleteable
+    draggable: true, //Allow an event to be dragged and dropped
+    resizable: true, //Allow an event to be resizable
     incrementsBadgeTotal: true, //If set to false then will not count towards the badge total amount on the month and year view
     recursOn: 'year', // If set the event will recur on the given period. Valid values are year or month
     cssClass: 'a-css-class-name' //A CSS class (or more, just separate with spaces) that will be added to the event when it is displayed on each view. Useful for marking an event as selected / active etc

docs/scripts/demo.js

@@ -14,18 +14,24 @@ angular
         title: 'An event',
         type: 'warning',
         startsAt: moment().startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
-        endsAt: moment().startOf('week').add(1, 'week').add(9, 'hours').toDate()
+        endsAt: moment().startOf('week').add(1, 'week').add(9, 'hours').toDate(),
+        draggable: true,
+        resizable: true
       }, {
         title: '<i class="glyphicon glyphicon-asterisk"></i> <span class="text-primary">Another event</span>, with a <i>html</i> title',
         type: 'info',
         startsAt: moment().subtract(1, 'day').toDate(),
-        endsAt: moment().add(5, 'days').toDate()
+        endsAt: moment().add(5, 'days').toDate(),
+        draggable: true,
+        resizable: true
       }, {
         title: 'This is a really long event title that occurs on every year',
         type: 'important',
         startsAt: moment().startOf('day').add(7, 'hours').toDate(),
         endsAt: moment().startOf('day').add(19, 'hours').toDate(),
-        recursOn: 'year'
+        recursOn: 'year',
+        draggable: true,
+        resizable: true
       }
     ];
 

index.html

@@ -117,7 +117,7 @@ <h3 class="modal-title">Event action occurred!</h3>
 
           <h3 id="event-editor">
             Edit events
-            <button class="btn btn-primary pull-right" ng-click="vm.events.push({title: 'New event', type: 'important'})">Add new</button>
+            <button class="btn btn-primary pull-right" ng-click="vm.events.push({title: 'New event', type: 'important', draggable: true, resizable: true})">Add new</button>
             <div class="clearfix"></div>
           </h3>
 
@@ -199,7 +199,7 @@ <h3 id="event-editor">
     <script src="src/directives/mwlCalendarHourList.js"></script>
     <script src="src/directives/mwlDraggable.js"></script>
     <script src="src/directives/mwlDroppable.js"></script>
-    <script src="src/directives/mwlResizeable.js"></script>
+    <script src="src/directives/mwlResizable.js"></script>
     <script src="src/directives/mwlElementDimensions.js"></script>
     <script src="docs/scripts/demo.js"></script>
 </body>

src/directives/mwlResizeable.js → src/directives/mwlResizable.js

@@ -2,7 +2,7 @@
 
 angular
   .module('mwl.calendar')
-  .controller('MwlResizeableCtrl', function($element, $scope, $parse, $attrs, interact) {
+  .controller('MwlResizableCtrl', function($element, $scope, $parse, $attrs, interact) {
 
     if (!interact) {
       return;
@@ -19,7 +19,7 @@ angular
     }
 
     function canResize() {
-      return $parse($attrs.mwlResizeable)($scope);
+      return $parse($attrs.mwlResizable)($scope);
     }
 
     function getUnitsResized(edge, elm, gridDimensions) {
@@ -124,11 +124,11 @@ angular
     });
 
   })
-  .directive('mwlResizeable', function() {
+  .directive('mwlResizable', function() {
 
     return {
       restrict: 'A',
-      controller: 'MwlResizeableCtrl'
+      controller: 'MwlResizableCtrl'
     };
 
   });

src/templates/calendarDayView.html

@@ -17,12 +17,12 @@
       ng-class="'dh-event-' + event.type + ' ' + event.cssClass"
       ng-repeat="event in vm.view track by event.$id"
       ng-style="{top: event.top + 'px', left: event.left + 60 + 'px', height: event.height + 'px'}"
-      mwl-draggable="event.editable !== false"
+      mwl-draggable="event.draggable === true"
       axis="y"
       snap-grid="{y: 30}"
       on-drag="vm.eventDragged(event, y)"
       on-drag-end="vm.eventDragComplete(event, y)"
-      mwl-resizeable="event.editable !== false"
+      mwl-resizable="event.resizable === true"
       resize-edges="{top: true, bottom: true}"
       on-resize="vm.eventResized(event, edge, y)"
       on-resize-end="vm.eventResizeComplete(event, edge, y)">

src/templates/calendarMonthEventsList.html

@@ -9,7 +9,7 @@
     ng-mouseleave="vm.highlightEvent(event, false)"
     tooltip-append-to-body="true"
     tooltip-html-unsafe="{{ (event.startsAt | calendarDate:'time':true) + ' - ' + event.title }}"
-    mwl-draggable="event.editable !== false"
+    mwl-draggable="event.draggable === true"
     drop-data="{event: event}">
   </a>
 </div>

src/templates/calendarSlideBox.html

@@ -5,7 +5,7 @@
       <li
         ng-repeat="event in events | orderBy:'startsAt' track by event.$id"
         ng-class="event.cssClass"
-        mwl-draggable="event.editable !== false"
+        mwl-draggable="event.draggable === true"
         drop-data="{event: event}">
         <span class="pull-left event" ng-class="'event-' + event.type"></span>
         &nbsp;

src/templates/calendarWeekView.html

@@ -44,12 +44,12 @@
             ng-class="'cal-cell' + (vm.showTimes ? 1 : event.daySpan) + ' cal-offset' + event.dayOffset + ' day-highlight dh-event-' + event.type + ' ' + event.cssClass"
             ng-style="{top: vm.showTimes ? ((event.top + 2) + 'px') : 'auto', position: vm.showTimes ? 'absolute' : 'inherit'}"
             data-event-class
-            mwl-draggable="event.editable !== false"
+            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)"
-            mwl-resizeable="event.editable !== false && !vm.showTimes"
+            mwl-resizable="event.resizable === true && !vm.showTimes"
             resize-edges="{left: true, right: true}"
             on-resize-end="vm.weekResized(event, edge, x)">
             <strong ng-bind="(event.tempStartsAt || event.startsAt) | calendarDate:'time':true" ng-show="vm.showTimes"></strong>