title: How to remove the last selected event in Fullcalendar?
body: <p>If i clicked in a specific date in calendar to make an appointment a modal appears to choose the user, service, date and time and leave comment, the modal has two buttons, first to make the appointment and the second to <strong>cancel the appointment</strong>, the <strong>problem</strong> is if i want to select another date , i see two events, one that i clicked before and the current one, if clicked <strong>make appointment</strong> button the two appointments will be created and i won't that to happen .</p>
  
  <p>Please, how to delete the last clicked event when i click <strong>Cancel button</strong> .</p>
  
  <h2><strong>Updates:</strong></h2>
  
  <p><strong>Calendar block</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm-12"&gt;
            &lt;h3 class="page-header text-uppercase"&gt;Booking&lt;/h3&gt;
            {% if client.is_subscriber(master.id) %}
              &lt;div id="calendar"&gt;&lt;/div&gt;
            {% else %}
              &lt;div class="alert alert-warning alert-dismissible alert-disappear" role="alert"&gt;
                  You have to subscribe first .
              &lt;/div&gt;
            {% endif %}
            &lt;hr&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Modal code that appears on dayClick:</p>
  
  <pre><code>&lt;div class="modal_window" id="calendar-modal" style="display: none;"&gt;
    &lt;div class="book_block"&gt;
      &lt;div class="base_part"&gt;
        &lt;div class="alert alert-success alert-dismissible alert-disappear" role="alert" style="display: none;" id="SuccessAppointment"&gt;
            &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
                &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
            &lt;/button&gt;
            Appointment created.
        &lt;/div&gt;
        &lt;div class="alert alert-danger alert-dismissible alert-disappear" role="alert" style="display: none;" id="FaildAppointment"&gt;
            &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
              &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
            &lt;/button&gt;
            Error.
        &lt;/div&gt;
        &lt;input type="hidden" name="serviceSet" id="serviceSet"&gt;
        &lt;div class="line"&gt;
          &lt;span class="line_name"&gt;Master:&lt;/span&gt;
          &lt;div class="line_input"&gt;
            &lt;span&gt;{{master.name}} {{master.family}}&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="line"&gt;
          &lt;span class="line_name"&gt;Service:&lt;/span&gt;
          &lt;select id="serviceTitleCalendar"&gt;
              &lt;option selected&gt;choose service&lt;/option&gt;
              &lt;option disabled="disabled"&gt;-----&lt;/option&gt;
              {% for service in master.services %}
                  &lt;option value="{{service.title}}" data-service='{{service.id}}'&gt;{{service.title}}&lt;/option&gt;
              {% endfor %}
          &lt;/select&gt;
        &lt;/div&gt;
  
        &lt;textarea id="serviceCommentCalendar" cols="60" rows="3" maxlength="160" class="comment" placeholder="Leave a comment" name="commentCalendar"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;div class="bottom_part"&gt;
        &lt;input id="change-cancel-calendar" type="button" value="Отменить" onclick="$('#calendar-modal').hide();"&gt;
        &lt;input type="button" value="make appointment" id="send-appo"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Full fullcalendar js code</strong>:</p>
  
  <pre><code>$(document).ready(function() {
  
  var initialLocaleCode = 'ru';
  var d = new Date();
  var strDate = d.getFullYear() + "/" + (d.getMonth()+1) + "/" + d.getDate();
  
    $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay,listMonth'
    },
  
    timezone: 'local',
    defaultView: 'agendaWeek',
    height: 650,
    locale: initialLocaleCode,
    navLinks: true, // can click day/week names to navigate views
    selectable: true,
    selectHelper: true,
    editable: false,
    resizable: true,
    eventResize: true,
    minTime: "06:00:00",
    maxTime: "22:00:00",
    eventLimit: 6, // allow "more" link when too many events
    select: function(title, start, end, jsEvent, view) {
  
  
      var modal = $('#calendar-modal');
      var title = $("select#serviceTitleCalendar option").filter(":selected").val();
      var eventData;
  
      if (title) {
  
        $(modal).attr('style', 'display: block');
  
        $("select#serviceTitleCalendar option").filter(function() {
            return $(this).val() == $("#serviceSet").val();
        }).attr('selected', true);
  
        $("select#serviceTitleCalendar").on("change", function() {
          $("#serviceSet").val($(this).find("option:selected").attr("value"));
  
          eventData = {
            id: Math.round(Math.random()*100),
            title: $("#serviceSet").val(),
            start: start,
            end: end
          };
  
  
          $('#calendar').fullCalendar('renderEvent', eventData, true);
  
          $('#send-appo').on('click', function(){
                eventData = {
                    title: $("#serviceSet").val(),
                    comment: $('#serviceCommentCalendar').val(),
                    start: start,
                    end: end
                };
                $.ajax({
                    type: 'POST',
                    url: '/client/cat-{{g.current_directory}}/appointment/calendar',
                    cache: false,
                    data: {
                        'title': eventData['title'],
                        'comment': eventData['comment'],
                        'start': eventData['start']['_d'],
                        'end': eventData['end']['_d']
                    }
                })
                .done(function(data){
                    if(data.error){
                      $('#FaildAppointment').attr('style', 'display: block');
                      $('#SuccessAppointment').attr('style', 'display: none');
                    }
                    else {
                      $(modal).attr('style', 'display: none');
                    }
  
                });
          });
  
        });
      }
  
      $('#calendar').fullCalendar('unselect');
    },
    events: [
      {% for appo in master.appointments %}
        {
          title: "На услуги: \n {{appo.service.title}} \n\n {% if appo.note %} Комментарий: \n{{appo.note}} {% endif %}",
          start: "{{appo.start_time}}",
          end: "{{appo.end_time}}",
          status: '{{appo.is_accepted}}'
        },
      {% endfor %}
    ],
    eventRender: function(event, element, view) {
        if(event.status == 'True') {
            element.css('background-color', 'green', 'border-color', 'green');
        } else {
          element.css('background-color', '#e74c3c', 'border-color', '#e74c3c');
        }
    },
    eventClick: function(calEvent, jsEvent, view) {
        if(confirm("Really delete event " + calEvent.title + " ?")) {
            // delete event in backend
            jQuery.post(
                "/delete/appointment/"
                , { "id": calEvent.id }
            );
            // delete in frontend
            $('#calendar').fullCalendar('removeEvents', calEvent._id);
        }
    },
    viewRender: function (view,element) {
  
        if (moment() &gt;= view.start &amp;&amp; moment() &lt;= view.end) {
            $(".fc-prev-button").prop('disabled', true); 
            $(".fc-prev-button").addClass('fc-state-disabled'); 
        }
        else {
            $(".fc-prev-button").removeClass('fc-state-disabled'); 
            $(".fc-prev-button").prop('disabled', false); 
        }
    }
  });
  </code></pre>
  
  <p>Inside my eventData, i've added a <strong>random id</strong> just to see if i clicked the cancel button all the clicked events get deleted or not, they get deleted completely from the calendar, but they still out there somewhere, i can see them if i confirmed the appointment, i get 4 or 5 notifications inside my dashboard .</p>
  
  <p>In <strong>eventClick</strong>, if i clicked on event directly it asks where if i want to delete it or not, in fact the deletion process should happens when i click the cancel button not after .</p>