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

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
  • Loading branch information...
Matt Lewis
Matt Lewis committed Jul 27, 2016
1 parent 08bbf74 commit 57446854febc4fbcf5dd56dabf97c6deb65e84c4
@@ -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.
@@ -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);
};

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

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

0 comments on commit 5744685

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