FullCalendar删除外部事件

Question

When I'm trying to delete an external event from my calendar, if I add say 3 external events then drag one to the bin, rather than removing just the one event it deletes all events (even the ones from the separate feeds I am doing.

Any idea why this is and how to fix it? Here is the code:

$(document).ready(function () {
    //listens for drop event
    $("#calendarTrash").droppable({
        tolerance: 'pointer',
        drop: function (event, ui) {
            var answer = confirm("Delete Event?")
            if (answer) {
                $('#calendar').fullCalendar('removeEvents', event.id);
            }
        }
    });

    /* initialize the external events  ------------*/
    $('#external-events div.external-event').each(function () {
        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
        };

        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);
        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });
    });
});

Answer 1

The event.id in your drop function does not refer to the FullCalendar event. It refers to the drop event that was just triggered.

You will need to use ui.draggable to access your draggable - in this case the FullCalendar event.

Hope this helps! Cool concept BTW!

Update : Check this fiddle for a proof-of-concept

Answer 2

For anyone in the same circumstances,..

 eventDragStop: function(event, jsEvent, ui, view) {

                 if (x) {
                    $('#calendar').fullCalendar('removeEvents', event._id);
                      }

Please notice I am using event._id, x is the result of checking which div the item is dragged into returning a true or false. checks which div the event is being dropped into. I also had to change some code in fullcalendar.js the function eachEventElement, was causing me an issue with the above code, so I changed it too.

 function eachEventElement(event, exceptElement, funcName) {
    try{
        var elements = eventElementsByID[event._id],
            i, len = elements.length;
        for (i=0; i<len; i++) {
            if (!exceptElement || elements[i][0] != exceptElement[0]) {
                elements[i][funcName]();
            }
        }
    }
    catch(err)
    {}
}