feat(events): allow the event colors to be customised

BREAKING CHANGE: The `type` field on event objects is now deprecated, you must now explicitly state the events color on each event. The old functionality will continue to work but will be removed in a future release. Before: ``` var events = [{ title: 'foo', type: 'info', ... other properties }]; ``` After: ``` var events = [{ title: 'foo', color: { primary: '#1e90ff', secondary: '#d1e8ff' }, ... other properties }]; ``` To ease migration the old events colors are available on the calendarConfig.colorTypes object so you can also do: ``` var events = [{ title: 'foo', color: calendarConfig.colorTypes.info, ... other properties }]; ``` Closes #402
mattlewis92 · Jul 27, 2016 · f06eb1d · f06eb1d
1 parent beb2d31
commit f06eb1d
Show file tree

Hide file tree

Showing 26 changed files with 136 additions and 56 deletions.
diff --git a/README.md b/README.md
@@ -120,9 +120,12 @@ An array of events to display on the calendar. For example:
 $scope.events = [
   {
     title: 'My event title', // The title of the event
-    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
+    color: { // can also be calendarConfig.colorTypes.warning for shortcuts to the deprecated event types
+      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
     draggable: true, //Allow an event to be dragged and dropped
@@ -135,7 +138,7 @@ $scope.events = [
 ];
 ```
 
-`title`, `type` and `startsAt` are required for all events.
+`title`, `color` and `startsAt` are required for all events.
 
 ### view-title
 

diff --git a/docs/docs.js b/docs/docs.js
@@ -1,7 +1,7 @@
 'use strict';
 
 angular
-  .module('mwl.calendar.docs', ['mwl.calendar', 'ui.bootstrap', 'ngTouch', 'ngAnimate', 'oc.lazyLoad', 'hljs'])
+  .module('mwl.calendar.docs', ['mwl.calendar', 'ui.bootstrap', 'ngTouch', 'ngAnimate', 'oc.lazyLoad', 'hljs', 'colorpicker.module'])
   .controller('ExamplesCtrl', function($http, $rootScope, $compile, $q, $location, $ocLazyLoad, plunkGenerator) {
 
     var vm = this;

diff --git a/docs/examples/all-day-events/javascript.js b/docs/examples/all-day-events/javascript.js
@@ -1,19 +1,19 @@
 angular
   .module('mwl.calendar.docs')
-  .controller('AllDayEventsCtrl', function(moment) {
+  .controller('AllDayEventsCtrl', function(moment, calendarConfig) {
 
     var vm = this;
 
     vm.events = [
       {
         title: 'An all day event',
-        type: 'warning',
+        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(),
         allDay: true
       }, {
         title: 'A non all day egent',
-        type: 'important',
+        color: calendarConfig.colorTypes.important,
         startsAt: moment().startOf('day').add(7, 'hours').toDate(),
         endsAt: moment().startOf('day').add(19, 'hours').toDate(),
         draggable: true,

diff --git a/docs/examples/badge-total/javascript.js b/docs/examples/badge-total/javascript.js
@@ -1,19 +1,19 @@
 angular
   .module('mwl.calendar.docs')
-  .controller('BadgeTotalCtrl', function(moment) {
+  .controller('BadgeTotalCtrl', function(moment, calendarConfig) {
 
     var vm = this;
 
     vm.events = [
       {
         title: 'Increments the badge total on the day cell',
-        type: 'warning',
+        color: calendarConfig.colorTypes.warning,
         startsAt: moment().startOf('month').toDate(),
         incrementsBadgeTotal: true
       },
       {
         title: 'Does not increment the badge total ',
-        type: 'info',
+        color: calendarConfig.colorTypes.info,
         startsAt: moment().startOf('month').toDate(),
         incrementsBadgeTotal: false
       }

diff --git a/docs/examples/cell-is-open/javascript.js b/docs/examples/cell-is-open/javascript.js
@@ -1,18 +1,18 @@
 angular
   .module('mwl.calendar.docs')
-  .controller('CellIsOpenCtrl', function(moment) {
+  .controller('CellIsOpenCtrl', function(moment, calendarConfig) {
 
     var vm = this;
 
     vm.events = [
       {
         title: 'Draggable event',
-        type: 'warning',
+        color: calendarConfig.colorTypes.warning,
         startsAt: moment().startOf('month').toDate()
       },
       {
         title: 'Non-draggable event',
-        type: 'info',
+        color: calendarConfig.colorTypes.info,
         startsAt: moment().startOf('month').add(1, 'day').toDate()
       }
     ];

diff --git a/docs/examples/clickable-events/javascript.js b/docs/examples/clickable-events/javascript.js
@@ -1,18 +1,18 @@
 angular
   .module('mwl.calendar.docs')
-  .controller('ClickableEventsCtrl', function(moment, alert) {
+  .controller('ClickableEventsCtrl', function(moment, alert, calendarConfig) {
 
     var vm = this;
 
     vm.events = [
       {
         title: 'Click me',
-        type: 'warning',
+        color: calendarConfig.colorTypes.warning,
         startsAt: moment().startOf('month').toDate()
       },
       {
         title: 'Or click me',
-        type: 'info',
+        color: calendarConfig.colorTypes.info,
         startsAt: moment().startOf('month').toDate()
       }
     ];

diff --git a/docs/examples/custom-event-class/javascript.js b/docs/examples/custom-event-class/javascript.js
@@ -1,13 +1,13 @@
 angular
   .module('mwl.calendar.docs')
-  .controller('CustomEventClassCtrl', function(moment) {
+  .controller('CustomEventClassCtrl', function(moment, calendarConfig) {
 
     var vm = this;
 
     vm.events = [
       {
         title: 'Has custom class',
-        type: 'warning',
+        color: calendarConfig.colorTypes.warning,
         startsAt: moment().startOf('month').toDate(),
         cssClass: 'my-custom-class'
       }

diff --git a/docs/examples/draggable-events/javascript.js b/docs/examples/draggable-events/javascript.js
@@ -1,19 +1,19 @@
 angular
   .module('mwl.calendar.docs')
-  .controller('DraggableEventsCtrl', function(moment, alert) {
+  .controller('DraggableEventsCtrl', function(moment, alert, calendarConfig) {
 
     var vm = this;
 
     vm.events = [
       {
         title: 'Draggable event',
-        type: 'warning',
+        color: calendarConfig.colorTypes.warning,
         startsAt: moment().startOf('month').toDate(),
         draggable: true
       },
       {
         title: 'Non-draggable event',
-        type: 'info',
+        color: calendarConfig.colorTypes.info,
         startsAt: moment().startOf('month').toDate(),
         draggable: false
       }

diff --git a/docs/examples/draggable-external-events/javascript.js b/docs/examples/draggable-external-events/javascript.js
@@ -1,6 +1,6 @@
 angular
   .module('mwl.calendar.docs')
-  .controller('DraggableExternalEventsCtrl', function(moment) {
+  .controller('DraggableExternalEventsCtrl', function(moment, calendarConfig) {
 
     var vm = this;
 
@@ -10,12 +10,14 @@ angular
       {
         title: 'Event 1',
         type: 'warning',
+        color: calendarConfig.colorTypes.warning,
         startsAt: moment().startOf('month').toDate(),
         draggable: true
       },
       {
         title: 'Event 2',
         type: 'danger',
+        color: calendarConfig.colorTypes.important,
         startsAt: moment().startOf('month').toDate(),
         draggable: true
       }

diff --git a/docs/examples/editable-deletable-events/javascript.js b/docs/examples/editable-deletable-events/javascript.js
@@ -1,25 +1,25 @@
 angular
   .module('mwl.calendar.docs')
-  .controller('EditableDeletableEventsCtrl', function(moment, alert) {
+  .controller('EditableDeletableEventsCtrl', function(moment, alert, calendarConfig) {
 
     var vm = this;
 
     vm.events = [
       {
         title: 'Editable event',
-        type: 'warning',
+        color: calendarConfig.colorTypes.warning,
         startsAt: moment().startOf('month').toDate(),
         editable: true,
         deletable: false
       }, {
         title: 'Deletable event',
-        type: 'info',
+        color: calendarConfig.colorTypes.info,
         startsAt: moment().startOf('month').toDate(),
         deletable: true,
         editable: false
       }, {
         title: 'Non editable and deletable event',
-        type: 'important',
+        color: calendarConfig.colorTypes.important,
         startsAt: moment().startOf('month').toDate(),
         editable: false,
         deletable: false

diff --git a/docs/examples/grouping-events/javascript.js b/docs/examples/grouping-events/javascript.js
@@ -14,22 +14,27 @@ angular
       {
         title: 'Event 1',
         type: 'warning',
+        color: calendarConfig.colorTypes.warning,
         startsAt: moment().startOf('month').toDate()
       }, {
         title: 'Event 2',
         type: 'info',
+        color: calendarConfig.colorTypes.info,
         startsAt: moment().startOf('month').toDate()
       }, {
         title: 'Event 3',
         type: 'info',
+        color: calendarConfig.colorTypes.info,
         startsAt: moment().startOf('month').toDate()
       }, {
         title: 'Event 4',
         type: 'danger',
+        color: calendarConfig.colorTypes.important,
         startsAt: moment().startOf('month').toDate()
       }, {
         title: 'Event 5',
-        type: 'primary',
+        type: 'success',
+        color: calendarConfig.colorTypes.success,
         startsAt: moment().startOf('month').toDate()
       }
     ];

diff --git a/docs/examples/kitchen-sink/javascript.js b/docs/examples/kitchen-sink/javascript.js
@@ -1,6 +1,6 @@
 angular
   .module('mwl.calendar.docs') //you will need to declare your module with the dependencies ['mwl.calendar', 'ui.bootstrap', 'ngAnimate']
-  .controller('KitchenSinkCtrl', function(moment, alert) {
+  .controller('KitchenSinkCtrl', function(moment, alert, calendarConfig) {
 
     var vm = this;
 
@@ -10,21 +10,21 @@ angular
     vm.events = [
       {
         title: 'An event',
-        type: 'warning',
+        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
       }, {
         title: '<i class="glyphicon glyphicon-asterisk"></i> <span class="text-primary">Another event</span>, with a <i>html</i> title',
-        type: 'info',
+        color: calendarConfig.colorTypes.info,
         startsAt: moment().subtract(1, 'day').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',
+        color: calendarConfig.colorTypes.important,
         startsAt: moment().startOf('day').add(7, 'hours').toDate(),
         endsAt: moment().startOf('day').add(19, 'hours').toDate(),
         recursOn: 'year',
@@ -35,6 +35,17 @@ angular
 
     vm.isCellOpen = true;
 
+    vm.addEvent = function() {
+      vm.events.push({
+        title: 'New event',
+        startsAt: moment().startOf('day').toDate(),
+        endsAt: moment().endOf('day').toDate(),
+        color: calendarConfig.colorTypes.important,
+        draggable: true,
+        resizable: true
+      });
+    };
+
     vm.eventClicked = function(event) {
       alert.show('Clicked', event);
     };

diff --git a/docs/examples/kitchen-sink/markup.html b/docs/examples/kitchen-sink/markup.html
@@ -69,7 +69,7 @@ <h3 id="event-editor">
     Edit events
     <button
       class="btn btn-primary pull-right"
-      ng-click="vm.events.push({title: 'New event', type: 'important', draggable: true, resizable: true})">
+      ng-click="vm.addEvent()">
       Add new
     </button>
     <div class="clearfix"></div>
@@ -80,7 +80,8 @@ <h3 id="event-editor">
     <thead>
       <tr>
         <th>Title</th>
-        <th>Type</th>
+        <th>Primary color</th>
+        <th>Secondary color</th>
         <th>Starts at</th>
         <th>Ends at</th>
         <th>Remove</th>
@@ -96,14 +97,10 @@ <h3 id="event-editor">
             ng-model="event.title">
         </td>
         <td>
-          <select ng-model="event.type" class="form-control">
-            <option value="important">Important</option>
-            <option value="warning">Warning</option>
-            <option value="info">Info</option>
-            <option value="inverse">Inverse</option>
-            <option value="success">Success</option>
-            <option value="special">Special</option>
-          </select>
+          <input class="form-control" colorpicker type="text" ng-model="event.color.primary">
+        </td>
+        <td>
+          <input class="form-control" colorpicker type="text" ng-model="event.color.secondary">
         </td>
         <td>
           <p class="input-group" style="max-width: 250px">

diff --git a/docs/examples/optional-event-end-dates/javascript.js b/docs/examples/optional-event-end-dates/javascript.js
@@ -1,17 +1,17 @@
 angular
   .module('mwl.calendar.docs')
-  .controller('OptionalEventEndDatesCtrl', function(moment) {
+  .controller('OptionalEventEndDatesCtrl', function(moment, calendarConfig) {
 
     var vm = this;
 
     vm.events = [{
       title: 'No event end date',
       startsAt: moment().hours(3).minutes(0).toDate(),
-      type: 'info'
+      color: calendarConfig.colorTypes.info
     }, {
       title: 'No event end date',
       startsAt: moment().hours(5).minutes(0).toDate(),
-      type: 'warning'
+      color: calendarConfig.colorTypes.warning
     }];
 
     vm.calendarView = 'day';

diff --git a/docs/examples/recurring-events/javascript.js b/docs/examples/recurring-events/javascript.js
@@ -1,6 +1,6 @@
 angular
   .module('mwl.calendar.docs')
-  .controller('RecurringEventsCtrl', function($scope, moment) {
+  .controller('RecurringEventsCtrl', function($scope, moment, calendarConfig) {
 
     var vm = this;
 
@@ -25,20 +25,20 @@ angular
 
       vm.events = [{
         title: 'Recurs monthly',
-        type: 'warning',
+        color: calendarConfig.colorTypes.warning,
         startsAt: moment().toDate(),
         recursOn: 'month'
       }, {
         title: 'Recurs yearly',
-        type: 'info',
+        tcolor: calendarConfig.colorTypes.info,
         startsAt: moment().toDate(),
         recursOn: 'year'
       }];
 
       rule.all().forEach(function(date) {
         vm.events.push({
           title: 'Recurs weekly on mondays',
-          type: 'success',
+          color: calendarConfig.colorTypes.success,
           startsAt: new Date(date)
         });
       });