diff --git a/README.md b/README.md index 59e41560..6a6cd088 100644 --- a/README.md +++ b/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: '', // 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. diff --git a/docs/examples/editable-deletable-events/javascript.js b/docs/examples/editable-deletable-events/javascript.js index f2924e8e..58cf8b0d 100644 --- a/docs/examples/editable-deletable-events/javascript.js +++ b/docs/examples/editable-deletable-events/javascript.js @@ -9,20 +9,26 @@ angular title: 'Editable event', color: calendarConfig.colorTypes.warning, startsAt: moment().startOf('month').toDate(), - editable: true, - deletable: false + actions: [{ + label: '', + 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: '', + 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() } ]; @@ -30,12 +36,4 @@ angular 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); - }; - }); diff --git a/docs/examples/editable-deletable-events/markup.html b/docs/examples/editable-deletable-events/markup.html index 10e374b0..795227f3 100644 --- a/docs/examples/editable-deletable-events/markup.html +++ b/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="''" - delete-event-html="''" - on-edit-event-click="vm.eventEdited(calendarEvent)" - on-delete-event-click="vm.eventDeleted(calendarEvent)"> + cell-is-open="vm.isCellOpen"> diff --git a/docs/examples/kitchen-sink/javascript.js b/docs/examples/kitchen-sink/javascript.js index 55363295..ef685937 100644 --- a/docs/examples/kitchen-sink/javascript.js +++ b/docs/examples/kitchen-sink/javascript.js @@ -7,6 +7,17 @@ angular //These variables MUST be set as a minimum for the calendar to work vm.calendarView = 'month'; vm.viewDate = new Date(); + var actions = [{ + label: '', + onClick: function(args) { + alert.show('Edited', args.calendarEvent); + } + }, { + label: '', + onClick: function(args) { + alert.show('Deleted', args.calendarEvent); + } + }]; vm.events = [ { title: 'An event', @@ -14,14 +25,16 @@ angular 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: ' Another event, with a html 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, @@ -29,7 +42,8 @@ angular endsAt: moment().startOf('day').add(19, 'hours').toDate(), recursOn: 'year', draggable: true, - resizable: true + resizable: true, + actions: actions } ]; diff --git a/docs/examples/kitchen-sink/markup.html b/docs/examples/kitchen-sink/markup.html index 079d358d..e21d2144 100644 --- a/docs/examples/kitchen-sink/markup.html +++ b/docs/examples/kitchen-sink/markup.html @@ -52,10 +52,6 @@

{{ vm.calendarTitle }}

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="''" - delete-event-html="''" - 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" diff --git a/src/directives/mwlCalendar.js b/src/directives/mwlCalendar.js index 50be29a8..86badc94 100644 --- a/src/directives/mwlCalendar.js +++ b/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; diff --git a/src/less/theme.less b/src/less/theme.less index 16ba25c4..91d3432e 100755 --- a/src/less/theme.less +++ b/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; } diff --git a/src/templates/calendarDayView.html b/src/templates/calendarDayView.html index 4593f937..5e20ca0f 100644 --- a/src/templates/calendarDayView.html +++ b/src/templates/calendarDayView.html @@ -85,6 +85,15 @@ ng-click="vm.onDeleteEventClick({calendarEvent: dayEvent.event})"> + + + diff --git a/src/templates/calendarSlideBox.html b/src/templates/calendarSlideBox.html index 035b7e4b..c0f722f0 100644 --- a/src/templates/calendarSlideBox.html +++ b/src/templates/calendarSlideBox.html @@ -31,6 +31,16 @@ ng-bind-html="vm.deleteEventHtml | calendarTrustAsHtml" ng-click="vm.onDeleteEventClick({calendarEvent: event})"> + + + +