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

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
  • Loading branch information...
Matt Lewis
Matt Lewis committed Jul 27, 2016
1 parent beb2d31 commit f06eb1de6683c2e988b85bcfa38ab6266590a016
@@ -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

@@ -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;
@@ -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,
@@ -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
}
@@ -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()
}
];
@@ -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()
}
];
@@ -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'
}
@@ -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
}
@@ -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
}
@@ -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
@@ -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()
}
];
@@ -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);
};
@@ -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">
@@ -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';
@@ -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)
});
});
Oops, something went wrong.

0 comments on commit f06eb1d

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