Fullcalendar: duplicate entry on dropping (external)

Question

I was using while adding events to Fullcalendar by external drag and drop, item doesn't get id to modify the dropped element (title, id and date) and get the callback in the drop function of the fullcalendar

var url = "json-save-urlaub.php?event="+date.format()+"&allDay="+date.hasTime();
                    $.post(
                        url, 
                        function(data){ //callback function retrieving the response sent by the controller/action
                            //event is the object that will actually be rendered to the calendar
                            var event = jQuery.parseJSON(data);
                            //actually rendering the new event to the calendar

                            $('#calendar').fullCalendar('renderEvent', event, true);

                            //$('#calendar').fullCalendar('refetchEvents');
                            $('#calendar').fullCalendar('unselect');
                        }
                    );

However now I have two entries when I drop the element on the fullcalendar since the callback gives me a new event object and the one dropped I can't remove since it has no id and I can't remove it manually neither can I use it for the URL call.

The line $(this).remove(); has no effect. Neither has $("#calendar").fullCalendar( 'removeEvents', copiedEventObject._id); when copying the dropped element first. How can I just have one element when dropping it?

Update: the fullcalendar.io/js/fullcalendar-2.3.1/demos/… example shows how the external events sticks or in my example how it shouldn't. solved the duplicate entry issue — Mike Noon

jchuck jchuck · Accepted Answer · 2016-10-22T14:24:42

according to the FullCalendar docs for renderEvent

"Normally, the event will disappear once the calendar refetches its event sources (example: when prev/next is clicked). However, specifying stick as true will cause the event to be permanently fixed to the calendar."

When you create your object, you need to set within the object data to not stick. ie. stick: false , or just remove your stick: true

    $('#external-events .fc-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: false // (see docs on the renderEvent method)
        });

        // 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
        });

    });

Fullcalendar: duplicate entry on dropping (external)

1 Answers