Delete an event by dragging it outside the full calendar of V 2 (with or without the trash icon ...)

Question

Can someone please give me advice on how to remove events from FullCalendar Version 2 by dragging it from the calendar, please?

Here I found some solution: Remove items from fullcalendar (by dragging to the trash)

but it seems to be turning to version 1.

Answer 1

My first approach:

eventDragStop: function(event,jsEvent) { alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY); if( (300 <= jsEvent.pageX) & (jsEvent.pageX <= 500) & (130 <= jsEvent.pageY) & (jsEvent.pageY <= 170)){ alert('delete: '+ event.id); $('#MyCalendar').fullCalendar('removeEvents', event.id); } } 

This allows you to drag events into the area (in pixels) that corresponds to the order of the if condition for deletion. Tested with full calendar 2.1.1.

The improvement will consist in checking and comparing jsEvent coordinates with $(window).height() and $(window).width() , so this will confirm / test drag and drop from the calendar area, of course, very carefully.

This is actually an improvement (elegant solution) based on the solution :

• Create a div element with garbage icons:

 <div id="calendarTrash" class="calendar-trash"><img src="path/to/static/images/trash.png" /></div> 

2. EventDragStop:

    eventDragStop: function(event,jsEvent) { var trashEl = jQuery('#calendarTrash'); var ofs = trashEl.offset(); var x1 = ofs.left; var x2 = ofs.left + trashEl.outerWidth(true); var y1 = ofs.top; var y2 = ofs.top + trashEl.outerHeight(true); if (jsEvent.pageX >= x1 && jsEvent.pageX<= x2 && jsEvent.pageY >= y1 && jsEvent.pageY <= y2) { alert('SIII'); $('#calendario').fullCalendar('removeEvents', event.id); } } 

Tested on Fullcalendar 2.1.1