Merge pull request #80 from shakerlxxv/master

Add event delete feature

3 files changed, 56 insertions, 2 deletions

diff --git a/jquery.weekcalendar.css b/jquery.weekcalendar.css
index 22c359a..76f479c 100644
--- a/jquery.weekcalendar.css
+++ b/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;
 }
diff --git a/jquery.weekcalendar.js b/jquery.weekcalendar.js
index 2c1a985..681715b 100644
--- a/jquery.weekcalendar.js
+++ b/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);
@@ -1820,7 +1832,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);
diff --git a/weekcalendar_demo_2.html b/weekcalendar_demo_2.html
index fbbe089..66a6ee2 100644
--- a/weekcalendar_demo_2.html
+++ b/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>