feat(eventActions): allow custom event actions to be set

BREAKING CHANGE: `on-edit-event-click`, `on-delete-event-click`, `edit-event-html`, `delete-event-html` are now deprecated and will be removed in a future release. Instead use the new event actions.

Before:
```
// in your template
events="events"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
on-edit-event-click="vm.eventEdited(calendarEvent)"
```

After:
```
// in your controller
$scope.events = [{
  actions: [{
    label: '<i class=\'glyphicon glyphicon-pencil\'></i>',
    onClick: function(args) {
      vm.eventEdited(args.calendarEvent);
    }
  }]
}];
```

Closes #386

README.md

@@ -126,8 +126,13 @@ $scope.events = [
       primary: '#e3bc08', // the primary event color (should be darker than secondary)
       secondary: '#fdf1ba' // the secondary event color (should be lighter than primary)
     },
-    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
+    actions: [{ // an array of actions that will be displayed next to the event title
+      label: '<i class=\'glyphicon glyphicon-pencil\'></i>', // the label of the action
+      cssClass: 'edit-action', // a CSS class that will be added to the action element so you can implement custom styling
+      onClick: function(args) { // the action that occurs when it is clicked. The first argument will be an object containing the parent event
+        console.log('Edit event', args.calendarEvent);
+      }
+    }],
     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
@@ -152,22 +157,6 @@ This expression is called when an event is clicked on the calendar. `calendarEve
 
 This expression is called when an event is dragged and dropped or resized into a different date / time on the calendar. The available values that are passed to the expression are: `calendarEvent`, `calendarNewEventStart`, `calendarNewEventEnd` and `calendarDraggedFromDate` (month view only). The directive won't change the event object and leaves that up to you to implement. Please note drag and drop is only available by including the [interact.js](http://interactjs.io/) library.
 
-### edit-event-html
-
-If provided this piece of html will be displayed next to an event on the year and month view and will fire the function passed to edit-event-click.
-
-### delete-event-html
-
-If provided this piece of html will be displayed next to an event on the year and month view and will fire the function passed to delete-event-click.
-
-### on-edit-event-click
-
-This expression is called when an event edit link is clicked on the calendar. `calendarEvent` can be used in the expression and contains the calendar event that was clicked on.
-
-### on-delete-event-click
-
-This expression is called when an event delete link is clicked on the calendar. `calendarEvent` can be used in the expression and contains the calendar event that was clicked on.
-
 ### on-timespan-click
 
 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.

docs/examples/editable-deletable-events/javascript.js

@@ -9,33 +9,31 @@ angular
         title: 'Editable event',
         color: calendarConfig.colorTypes.warning,
         startsAt: moment().startOf('month').toDate(),
-        editable: true,
-        deletable: false
+        actions: [{
+          label: '<i class=\'glyphicon glyphicon-pencil\'></i>',
+          onClick: function(args) {
+            alert.show('Edited', args.calendarEvent);
+          }
+        }]
       }, {
         title: 'Deletable event',
         color: calendarConfig.colorTypes.info,
         startsAt: moment().startOf('month').toDate(),
-        deletable: true,
-        editable: false
+        actions: [{
+          label: '<i class=\'glyphicon glyphicon-remove\'></i>',
+          onClick: function(args) {
+            alert.show('Deleted', args.calendarEvent);
+          }
+        }]
       }, {
         title: 'Non editable and deletable event',
         color: calendarConfig.colorTypes.important,
-        startsAt: moment().startOf('month').toDate(),
-        editable: false,
-        deletable: false
+        startsAt: moment().startOf('month').toDate()
       }
     ];
 
     vm.calendarView = 'month';
     vm.viewDate = moment().startOf('month').toDate();
     vm.isCellOpen = true;
 
-    vm.eventEdited = function(event) {
-      alert.show('Edited', event);
-    };
-
-    vm.eventDeleted = function(event) {
-      alert.show('Deleted', event);
-    };
-
   });

docs/examples/editable-deletable-events/markup.html

@@ -4,10 +4,6 @@
     events="vm.events"
     view="vm.calendarView"
     view-date="vm.viewDate"
-    cell-is-open="vm.isCellOpen"
-    edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
-    delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
-    on-edit-event-click="vm.eventEdited(calendarEvent)"
-    on-delete-event-click="vm.eventDeleted(calendarEvent)">
+    cell-is-open="vm.isCellOpen">
   </mwl-calendar>
 </div>

docs/examples/kitchen-sink/javascript.js

@@ -7,29 +7,43 @@ angular
     //These variables MUST be set as a minimum for the calendar to work
     vm.calendarView = 'month';
     vm.viewDate = new Date();
+    var actions = [{
+      label: '<i class=\'glyphicon glyphicon-pencil\'></i>',
+      onClick: function(args) {
+        alert.show('Edited', args.calendarEvent);
+      }
+    }, {
+      label: '<i class=\'glyphicon glyphicon-remove\'></i>',
+      onClick: function(args) {
+        alert.show('Deleted', args.calendarEvent);
+      }
+    }];
     vm.events = [
       {
         title: 'An event',
         color: calendarConfig.colorTypes.warning,
         startsAt: moment().startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
         endsAt: moment().startOf('week').add(1, 'week').add(9, 'hours').toDate(),
         draggable: true,
-        resizable: true
+        resizable: true,
+        actions: actions
       }, {
         title: '<i class="glyphicon glyphicon-asterisk"></i> <span class="text-primary">Another event</span>, with a <i>html</i> title',
         color: calendarConfig.colorTypes.info,
         startsAt: moment().subtract(1, 'day').toDate(),
         endsAt: moment().add(5, 'days').toDate(),
         draggable: true,
-        resizable: true
+        resizable: true,
+        actions: actions
       }, {
         title: 'This is a really long event title that occurs on every year',
         color: calendarConfig.colorTypes.important,
         startsAt: moment().startOf('day').add(7, 'hours').toDate(),
         endsAt: moment().startOf('day').add(19, 'hours').toDate(),
         recursOn: 'year',
         draggable: true,
-        resizable: true
+        resizable: true,
+        actions: actions
       }
     ];
 

docs/examples/kitchen-sink/markup.html

@@ -52,10 +52,6 @@ <h2 class="text-center">{{ vm.calendarTitle }}</h2>
     view-date="vm.viewDate"
     on-event-click="vm.eventClicked(calendarEvent)"
     on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
-    edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
-    delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
-    on-edit-event-click="vm.eventEdited(calendarEvent)"
-    on-delete-event-click="vm.eventDeleted(calendarEvent)"
     cell-is-open="vm.isCellOpen"
     day-view-start="06:00"
     day-view-end="22:59"

src/directives/mwlCalendar.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var angular = require('angular');
+var LOG_PREFIX = 'Bootstrap calendar:';
+var CHANGELOG_LINK = 'https://github.com/mattlewis92/angular-bootstrap-calendar/blob/master/CHANGELOG.md';
 
 angular
   .module('mwl.calendar')
@@ -31,11 +33,15 @@ angular
 
     };
 
+    if ($attrs.onEditEventClick || $attrs.onDeleteEventClick || $attrs.editEventHtml || $attrs.deleteEventHtml) {
+      $log.warn(LOG_PREFIX, '`on-edit-event-click`, `on-delete-event-click`, `edit-event-html`, `delete-event-html` options ' +
+        'are deprecated, please see the changelog on how to upgrade: ' + CHANGELOG_LINK);
+    }
+
     var previousDate = moment(vm.viewDate);
     var previousView = vm.view;
 
     function eventIsValid(event) {
-      var LOG_PREFIX = 'Bootstrap calendar:';
       if (!event.startsAt) {
         $log.warn(LOG_PREFIX, 'Event is missing the startsAt field', event);
       } else if (!angular.isDate(event.startsAt)) {
@@ -52,8 +58,7 @@ angular
       }
 
       if (event.type && !event.color) {
-        $log.warn(LOG_PREFIX, 'Event type is deprecated, please see the changelog on how to upgrade: ' +
-          'https://github.com/mattlewis92/angular-bootstrap-calendar/blob/master/CHANGELOG.md', event);
+        $log.warn(LOG_PREFIX, 'Event type is deprecated, please see the changelog on how to upgrade: ' + CHANGELOG_LINK, event);
       }
 
       return true;

src/less/theme.less

@@ -140,13 +140,16 @@ span[data-cal-date]:hover {
   font-weight: normal;
 }
 
-a.event-item-edit, a.event-item-delete {
+a.event-item-edit,
+a.event-item-delete,
+a.event-item-action {
   padding-left: 5px;
 }
 
 .cal-year-box .cal-slide-content a.event-item,
 .cal-year-box a.event-item-edit,
-.cal-year-box a.event-item-delete {
+.cal-year-box a.event-item-delete,
+.cal-year-box a.event-item-action {
   position: relative;
   top: -3px;
 }

src/templates/calendarDayView.html

@@ -85,6 +85,15 @@
         ng-click="vm.onDeleteEventClick({calendarEvent: dayEvent.event})">
       </a>
 
+      <a
+        href="javascript:;"
+        class="event-item-action"
+        ng-repeat="action in dayEvent.event.actions track by $index"
+        ng-class="action.cssClass"
+        ng-bind-html="action.label | calendarTrustAsHtml"
+        ng-click="action.onClick({calendarEvent: dayEvent.event})">
+      </a>
+
     </div>
 
   </div>

src/templates/calendarSlideBox.html

@@ -31,6 +31,16 @@
           ng-bind-html="vm.deleteEventHtml | calendarTrustAsHtml"
           ng-click="vm.onDeleteEventClick({calendarEvent: event})">
         </a>
+
+        <a
+          href="javascript:;"
+          class="event-item-action"
+          ng-class="action.cssClass"
+          ng-repeat="action in event.actions track by $index"
+          ng-bind-html="action.label | calendarTrustAsHtml"
+          ng-click="action.onClick({calendarEvent: event})">
+        </a>
+
       </li>
 
     </ul>