Delete event by dragging it outside of the full calendar V 2 (with or without trash icon...)
My first approach would be:
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 to drag events to the area (in pixels) corresponding to the if condition order to delete. Tested with fullcalendar 2.1.1.
An improvement would be to check and compare jsEvent coordinates with $(window).height()
and $(window).width()
, this way would confirm/test dragging out of calendar area, much neat of course.
Actually the improvement is (an elegant solution), based on the solution mentioned:
- Create a div element with the icon trash:
<div id="calendarTrash" class="calendar-trash"><img src="path/to/static/images/trash.png" /></div>
The eventDragStop is:
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
Without jQuery :
eventDragStop: function(e) {
let trashEl = document.getElementById('fcTrash') as HTMLElement;
let x1 = trashEl.offsetLeft;
let x2 = trashEl.offsetLeft + trashEl.offsetWidth;
let y1 = trashEl.offsetTop;
let y2 = trashEl.offsetTop + trashEl.offsetHeight;
if (e.jsEvent.pageX >= x1 && e.jsEvent.pageX <= x2 &&
e.jsEvent.pageY >= y1 && e.jsEvent.pageY <= y2) {
e.event.remove();
}
}