title: fullCalendar 1.5.3 multiple events created, unable to remove unselected events
body: <p>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.</p>
  
  <p>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).  </p>
  
  <p><img src="https://i.stack.imgur.com/2OY6N.png" alt="The confirm or cancel modal window"></p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/UVip3.png" alt="Multiple Events created even though the previous two events ought to have been unselected"></p>
  
  <p>Why is this so and how do I prevent fullCalendar from remembering unconfirmed selections?</p>
  
  <p>Here's the code:-</p>
  
  <pre><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 &lt; 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 &lt; 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
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>The confirmBooking function as requested:-</p>
  
  <pre><code>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
  </code></pre>
  
  <p>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.</p>