Question

Using fullCalendar, I allow a user to select a day in month view in a big calendar (#cal_big) and the corresponding small calendar in day view, with hours shown (#cal_small) will be displayed.

Whenever the user selects an event (an hour or block of hours) in #cal_small, I will display a confirm/cancel modal. The confirm/cancel modal allows the user to either confirm the booking or cancel the booking (which semantically means that the user does not really want to book that slot after all).

If the user confirms the booking, I make an ajax call to the server and registers the booking. Once the ajax call returns successfully, I simply hide the current modal and display a “Your booking is successful!” message in a new modal. This part works flawlessly.

If the user cancels the booking, the confirm/cancel modal gets hidden and I attempt to programmatically unselect the current selection and this is where the problem begins. The unselect does not work and it seems that fullCalendar remembers all these selections which are not confirmed and when the user finally confirms his selection, a whole bunch of previously unconfirmed selections are all sent to the server repeatedly in multiple ajax calls.

Why is this so and how do I prevent fullCalendar from remembering unconfirmed selections?

Here’s the code:-

$(document).ready(function() {

    var todayDate = new Date();

    var myDate = todayDate.setDate(todayDate.getDate() - 1);

    var csrfmiddlewaretoken = '{{ csrf_token }}';

    var condo_slug = '{{ condo.slug }}';

    var facility = $("#id_facility");

    var cal_small_options = {
        titleFormat: {
            day: 'dddd' 
        },
        header: {
            left: '',
            center:'title',
            right:'',
        },
        height: 520,
        defaultView: 'agendaDay',
        editable: true,
        minTime: '10:00',
        maxTime: '23:00',
        slotMinutes: 60,
        selectable: true,
        select: function(startDate, endDate, allDay, jsEvent, view) {
            console.log("selection triggered", jsEvent.handleObj.guid)
            checkAvailability(csrfmiddlewaretoken, condo_slug, facility, startDate, endDate);
            $('#confirm').click(function(){
                confirmBooking(csrfmiddlewaretoken, condo_slug, facility.val(), startDate, endDate)
            });
        },
        events: function(start, end, callback) {
            // start and end marks the current date range shown on the calendar
            ajaxShowEvents(facility.val(), condo_slug, start, end, callback); 
        },
        eventClick: function(event) {
            console.log(event.title);
        },
        viewDisplay: function(view) {
            // Clear the calendar and retrieve event objects when user selects a facility.
            $('#id_facility').change(function(){
                ajaxShowEvents(facility_id = $(this).val(), start = view.start, end = view.end); 
            });
        }
    };

    var cal_big_options = {
        header: {
            left: '',
            center:'title',
            right: ''
        },
        dayClick: function(date, allDay, jsEvent, view) {
            if (date < myDate) {
                alert('You cannot book on this day!');
            }
            if (allDay) {
                $('#cal_small').fullCalendar('gotoDate', date);
            } else {
                alert('Clicked on the slot: ' + date);
            }
        },
        selectable: true,
        unselectCancel: '', 
        events: function(start, end, callback) {
            // start and end marks the current date range shown on the calendar
            ajaxShowEvents(facility.val(), condo_slug, start, end, callback); 
        },
        viewDisplay: function(view) {
            // Clear the calendar and retrieve event objects when user selects a facility.
            $('#id_facility').change(function(){
                ajaxShowEvents(facility_id = $(this).val(), start = view.start, end = view.end); 
            });
        },
        eventClick: function(event, jsEvent, view) {

            if(event.start < myDate) {
                alert('You cannot book on this day!');
            }  else {
                // check to see if the booking belongs to user
                ajaxCheckBooking(csrfmiddlewaretoken, event);
                $('#confirm').click(function(){ 
                    ajaxDeleteBooking(csrfmiddlewaretoken, event)
                });
            }
        }
    };

    $('#cal_small').fullCalendar(cal_small_options);

    $('#cal_big').fullCalendar(cal_big_options);

    $('.cancel, .btn_close').click(function() {
            $('#cal_big, #cal_small').fullCalendar('unselect')
            $('#modal-window').modal('hide');
        });

}); // END document ready

UPDATE

The confirmBooking function as requested:-

function confirmBooking(csrfmiddlewaretoken, condo_slug, facility_id, startDate, endDate) {
    // Given condo slug, facility id and the user selected startDate and endDate,
    // send an ajax post request to confirm the booking
    post_data = {csrfmiddlewaretoken: csrfmiddlewaretoken, 
                 condo_slug: condo_slug, 
                 facility_id: facility_id, 
                 start_date: startDate.toUTCString(), 
                 end_date: endDate.toUTCString()} 
    $.ajax({
        url: '/facility/ajax-confirm-booking/',
        data: post_data,
        type: 'POST',
        dataType: 'json',
        success: function(data) {
            if (data['status']=='success') {
                message = "Your booking is confirmed!"
                event = new Object();
                event.id = data['id'];
                event.title = "Your Booked Event";
                event.start = startDate;
                event.end = endDate;
                event.allDay = false;   
                $("#cal_big").fullCalendar('renderEvent', event);
                $("#cal_small").fullCalendar('renderEvent', event);
                // TODO: 
                // * disable the submit and reset buttons
                // * email notification to end user and property manager
            } else if (data['status']=='not logged in') {
                message = "You are not yet logged in!"
                // TODO:
                // * Provide fb login button so user can login.
            } else {
                message = "I am sorry. Something went wrong with your booking"
                // TODO: 
                // * Work on an email notification to site admin if a booking has failed for some reason
            }

            displayModal(message, false);
        }
    });
}; // END confirmBooking

Appreciate if some one could elaborate why the .fullCalendar(‘unselect’) call does not work to remove unconfirmed events and how I can possible solve this problem.

Answer 1

Solved it.

It is a dead simple bug which I completely missed.

   select: function(startDate, endDate, allDay, jsEvent, view) {
        console.log("selection triggered", jsEvent.handleObj.guid)
        checkAvailability(csrfmiddlewaretoken, condo_slug, facility, startDate, endDate);
        $('#confirm').click(function(){
            confirmBooking(csrfmiddlewaretoken, condo_slug, facility.val(), startDate, endDate)
        });
    },

causes a click event to be bound to the #confirm button everytime an event is selected on the calendar. So if the user keeps selecting event without confirming, the #confirm button will keep accumulating different click events with different startDate and endDate. When the user finally hits the #confirm button after repeated indecision, all the click events fire off at one go, resulting in the previously unselected events being sent to the server as an ajax post.

To solve this, I must remember to specify $('#confirm').unbind() when the user clicks on the .cancel or .close button.

Argh… a simple solution but it took me so long to see it!