Skip to content
This repository has been archived by the owner on Jun 19, 2018. It is now read-only.

Commit

Permalink
feat(eventActions): allow custom event actions to be set
Browse files Browse the repository at this point in the history
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 committed Jul 27, 2016
1 parent 08bbf74 commit 5744685
Show file tree
Hide file tree
Showing 9 changed files with 70 additions and 50 deletions.
25 changes: 7 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.
Expand Down
28 changes: 13 additions & 15 deletions docs/examples/editable-deletable-events/javascript.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};

});
6 changes: 1 addition & 5 deletions docs/examples/editable-deletable-events/markup.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
20 changes: 17 additions & 3 deletions docs/examples/kitchen-sink/javascript.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
];

Expand Down
4 changes: 0 additions & 4 deletions docs/examples/kitchen-sink/markup.html
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
11 changes: 8 additions & 3 deletions src/directives/mwlCalendar.js
Original file line number Diff line number Diff line change
@@ -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')
Expand Down Expand Up @@ -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)) {
Expand All @@ -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;
Expand Down
7 changes: 5 additions & 2 deletions src/less/theme.less
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
9 changes: 9 additions & 0 deletions src/templates/calendarDayView.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 10 additions & 0 deletions src/templates/calendarSlideBox.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 5744685

Please sign in to comment.