Delete event by dragging it outside of the full calendar V 2 (with or without trash icon...)
Solution 1
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
Solution 2
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();
}
}
Solution 3
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) {
if (confirm("Are you sure to detete " + event.title +" ?")) {
//pour annuker les informations
$('#external-calendar').fullCalendar('removeEvents', event._id);
}
}
}
`
event._id not event.id (all events will be deleted)
<div id="calendarTrash" class="calendar-trash"><img src="images\trash.png" alt="image"/></div>
![Admin](/assets/logo_square_200-5d0d61d6853298bd2a4fe063103715b4daf2819fc21225efa21dfb93e61952ea.png)
Admin
Updated on June 21, 2022Comments
-
Admin about 2 years
Can somebody please give me advice on how to delete events from the FullCalendar Version 2 by dragging it out of the calendar, please?
I saw some solution here: Remove Elements from fullcalendar (by dragging to trash can)
but it seems to address the version 1.
-
Admin almost 10 yearsWorks great. Thanks. I just had to change event.id to event._id
-
Michbeckable over 9 yearsI did it with an external trash-div where events can be dragged to for removing them. Why doesn't it work with jQueryUi jsut making the trash-div.droppable. The fullCalendar events are not even recognized when being dragged over a droppable, why?
-
skeletank over 8 yearsThis works for me except that before it is deleted it shows the animation of the event going back to its original date. How can I prevent this?
-
RredCat over 8 years@skeletank check out dragRevertDuration property - fullcalendar.io/docs/event_ui/dragRevertDuration for preventing animation.
-
Aimal Khan almost 8 yearsWorked Great! Thank you @user2155441
-
joan16v over 7 years@RredCat Thanks, it works. I set it to 0: "dragRevertDuration: 0"
-
AMG almost 7 years@RredCat did you set dragRevertDuration for the event only if it was placed on the trash? If so, how?
-
Apps-n-Add-Ons almost 4 yearsshould also comment that this is the way to do this with latest version (5.0) of fullcalendar (there is only 'info' that comes from the function, no longer two variables - fullcalendar.io/docs/eventDragStop)