Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Add event delete feature #80

Merged
merged 2 commits into from

2 participants

@shakerlxxv

I was looking for a UI based event delete option. This adds the following options:

  • allowEventDelete: [boolean | default: false ] globally enable / disable delete features, defaults to false for backward compatibility
  • eventDelete : [function(calEvent, element, freeBusyManager, $calendar, DomEvent)] Called when user clicks on the wc-cal-event-delete element. Defaults to a function which "removeEvent" for calEvent.
  • deletable: [function(calEvent, eventElement)] Called when each event is rendered to determine if it should be deletable. Defaults to a function which returns true for all events.

A deletable event is rendered with an additional element in the header with class wc-cal-event-delete.

I updated demo 2 with a new data set including options to show the use of the delete options.

@themouette themouette merged commit 4328d5b into themouette:master
@themouette
Owner

thanks for sharing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 17, 2011
  1. add feature to allow events to be deleted

    Brian Shaver authored
  2. update demo to show use of event delete options

    Brian Shaver authored
This page is out of date. Refresh to see the latest.
View
7 jquery.weekcalendar.css
@@ -220,6 +220,13 @@ table.wc-time-slots {
}
+.wc-cal-event-delete {
+ float: right;
+ cursor: pointer;
+ width: 16px;
+ height: 16px;
+}
+
.wc-cal-event.ui-resizable-resizing {
cursor: s-resize;
}
View
22 jquery.weekcalendar.js
@@ -63,11 +63,15 @@
},
switchDisplay: {},
scrollToHourMillis: 500,
+ allowEventDelete: false,
allowCalEventOverlap: false,
overlapEventsSeparate: false,
totalEventsWidthPercentInOneColumn : 100,
readonly: false,
allowEventCreation: true,
+ deletable: function(calEvent, element) {
+ return true;
+ },
draggable: function(calEvent, element) {
return true;
},
@@ -99,6 +103,10 @@
},
eventMouseout: function(calEvent, $event) {
},
+ eventDelete: function(calEvent, element, dayFreeBusyManager,
+ calendar, clickEvent) {
+ calendar.weekCalendar('removeEvent',calEvent.id);
+ },
calendarBeforeLoad: function(calendar) {
},
calendarAfterLoad: function(calendar) {
@@ -591,7 +599,11 @@
var $calEvent = $target.hasClass('wc-cal-event') ? $target : $target.parents('.wc-cal-event');
if ($calEvent.length) {
freeBusyManager = self.getFreeBusyManagerForEvent($calEvent.data('calEvent'));
- options.eventClick($calEvent.data('calEvent'), $calEvent, freeBusyManager, self.element, event);
+ if (options.allowEventDelete && $target.hasClass('wc-cal-event-delete')) {
+ options.eventDelete($calEvent.data('calEvent'), $calEvent, freeBusyManager, self.element, event);
+ }else{
+ options.eventClick($calEvent.data('calEvent'), $calEvent, freeBusyManager, self.element, event);
+ }
}
}).mouseover(function(event) {
var $target = $(event.target);
@@ -1815,7 +1827,13 @@
* Refresh the displayed details of a calEvent in the calendar
*/
_refreshEventDetails: function(calEvent, $calEvent) {
- $calEvent.find('.wc-time').html(this.options.eventHeader(calEvent, this.element));
+ var suffix = '';
+ if (!this.options.readonly &&
+ this.options.allowEventDelete &&
+ this.options.deletable(calEvent,$calEvent)) {
+ suffix = '<div class="wc-cal-event-delete ui-icon ui-icon-close"></div>';
+ }
+ $calEvent.find('.wc-time').html(this.options.eventHeader(calEvent, this.element) + suffix);
$calEvent.find('.wc-title').html(this.options.eventBody(calEvent, this.element));
$calEvent.data('calEvent', calEvent);
this.options.eventRefresh(calEvent, $calEvent);
View
29 weekcalendar_demo_2.html
@@ -101,6 +101,30 @@
{"id":5, "start": new Date(year, month, day + 1, 14), "end": new Date(year, month, day + 1, 15),"title":"Product showcase"}
]
};
+
+
+ // data set 3 : using event delete features
+ var eventData3 = {
+ options: {
+ allowEventDelete: true,
+ eventDelete: function(calEvent, element, dayFreeBusyManager,
+ calendar, clickEvent) {
+ if ( confirm('You want to delete this event?') ) {
+ calendar.weekCalendar('removeEvent',calEvent.id);
+ }
+ },
+ deletable: function(calEvent, element) {
+ return calEvent.start > Date.today();
+ }
+ },
+ events : [
+ {"id":1, "start": new Date(year, month, day, 12), "end": new Date(year, month, day, 13, 00),"title":"Lunch with Ashley"},
+ {"id":2, "start": new Date(year, month, day, 14), "end": new Date(year, month, day, 14, 40),"title":"Team Picnic"},
+ {"id":3, "start": new Date(year, month, day + 1, 18), "end": new Date(year, month, day + 1, 18, 40),"title":"Meet with Cathy"},
+ {"id":4, "start": new Date(year, month, day - 1, 8), "end": new Date(year, month, day - 1, 9, 20),"title":"Coffee with Alyssa"},
+ {"id":5, "start": new Date(year, month, day + 1, 14), "end": new Date(year, month, day + 1, 15),"title":"Product kickoff"}
+ ]
+ };
$(document).ready(function() {
@@ -126,6 +150,8 @@
callback(eventData1);
} else if(dataSource === "2") {
callback(eventData2);
+ } else if(dataSource === "3") {
+ callback(eventData3);
} else {
callback([]);
}
@@ -145,6 +171,8 @@
$("#message").text("Displaying event data set 1 with timeslots per hour of 4 and timeslot height of 20px");
} else if(dataSource === "2") {
$("#message").text("Displaying event data set 2 with timeslots per hour of 3 and timeslot height of 30px");
+ } else if(dataSource === "3") {
+ $("#message").text("Displaying event data set 3 with allowEventDelete enabled. Events before today will not be deletable. A confirmation dialog is opened when you delete an event.");
} else {
$("#message").text("Displaying no events.");
}
@@ -168,6 +196,7 @@
<option value="">Select Event Data</option>
<option value="1">Event Data 1</option>
<option value="2">Event data 2</option>
+ <option value="3">Event data 3</option>
</select>
</div>
<div id='calendar'></div>
Something went wrong with that request. Please try again.