How to remove an unsaved event?

Question

I am using jquery and fullcalendar to schedule activities. When users select a timeslot, a form is shown on the right of the calendar where they can enter additional details.

With the 'select' callback I render a temporary event on the calendar so my users will have visual feedback while filling out the form.

However, when they have misselected a timeslot, they are able to select a new timeslot. This however renders a second (and possibly a third, fourth...) event on the calendar.

I thought I would be able to use the 'eventAfterRender(event, element)' callback to element.siblings().remove(), but this failed as eventAfterRender is called for every event on the calendar with every renderEvent.

Maybe there is a callback or method that I am missing, but as I see it, there is no easy way to remove an "unsaved" event.

Below is some sample code.

var fullCal = '';
$(function() {
    fullCal = $('#fullcalendar').fullCalendar({
        // options
        select: SelectDate,
        eventAfterRender: function(event, element) { 
            // this does not work as it simply just keeps the last event in the DOM.
            element.siblings().remove()
        },
        viewDisplay: UnselectDate  // hides and clears the form, intended behavior

    });

});

function SelectDate(startDate, endDate, allDay, jsEvent, view) {
    $('#BijlesForm').show();

    var BijlesEvent = {start: startDate, end: endDate, title: 'Bijles', allDay: false};
    fullCal.fullCalendar('renderEvent', BijlesEvent);

    //fill the form
}

Bram Bram · Accepted Answer · 2010-08-11T20:37:12

Okay, silly silly me. It must've been the fatigue or something, but I found how to do it on my own.

I removed the eventAfterRender callback and changed my SelectDate function to this:

function SelectDate(startDate, endDate, allDay, jsEvent, view) {
    $('#BijlesForm').show();

    fullCal.fullCalendar( 'removeEvents', 'unsaved' )
    var BijlesEvent = {start: startDate, end: endDate, title: 'Bijles', allDay: false, id: 'unsaved'};
    fullCal.fullCalendar('renderEvent', BijlesEvent);
}

This works like a charm. Is this also the preferred way of doing things, or should it be done differently?

How to remove an unsaved event?

1 Answers