Timm Simpkins Timm Simpkins - 3 years ago 172
jQuery Question

How to delete externally dropped events from fullcalendar?

I have been trying to make it so I can drag events from fullcalendar to the trash, and the code I have works great for events that are rendered when the calendar is initialized, but it doesn't seem to work with events that have been dropped onto the calendar from external events.

When I drag an external event onto the calendar, then try to drag them to the trash, it deletes all events.

I have seen a couple posts like this that say to use the _id attribute, but when I do that, nothing is deleted.

Here is the code I'm using:

eventDragStop: function (event, jsEvent) {

var trashEl = jQuery('#trashCan');
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) {
$('#calendar').fullCalendar('removeEvents', event._id);

passing event.id works, but event._id, as I have it here, does nothing.

To clarify things a bit, I decided I should leave all the relevant code.

This is how I have my external events. The first one is directly copied from a fullcalendar instance I've had working for about a year.:

<div id="external-events" class="dropdown col-lg-3">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Unscheduled Events
<span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="dropdown-header">Drag events to calendar</li>
<li class="divider"></li>
<li><a href="#" data-duration="01:00" data-event='{"id": "803", "title": "Jennifer Ramundo"}' class='menu-event'>My Event 1</a></li>
<li class="divider"></li>
<li><a href="#" data-event="{'id': '2'}" class='menu-event'>My Event 2</a></li>
<li class="divider"></li>
<li><a href="#" data-event="{'id': '3'}" class='menu-event'>My Event 3</a></li>

This is how I initialize the external events:

$('#external-events .menu-event').each(function () {

// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)

// make the event draggable using jQuery UI
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag

And here is my drop function:

drop: function (date, jsEvent, ui, resourceId) {
console.log('drop', date.format(), resourceId);
if ($('#external-events').find('.menu-event').length === 0) {

Answer Source
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download