title: How to prevent event overlapping when updating existing events in Full Calendar?
body: <p>I have used <code>eventOverlap: false,</code> and <code>selectOverlap: false,</code> to prevent the user from overlapping events. However, I am trying to prevent the user from overlapping existing events.</p>
  
  <p>In my full calendar the user can click on an event, which opens a pop up dialog and allows the user to update the date/time of the selected event. However, the user is able choose a date/time where an event is already booked. Therefore, I want to have a validation on the Save button that checks if the updated date/time has an event or not before any changes are made. These two screen shots show this problem graphically.
  1. <a href="https://i.stack.imgur.com/eoNum.png" rel="nofollow noreferrer">Shows that event time is being updated</a>.  2. <a href="https://i.stack.imgur.com/yz4f2.png" rel="nofollow noreferrer">Shows the event is overlapping after it has been updated</a></p>
  
  <pre><code>var events = []; //global array where all the events are stored
  
  function FetchEventAndRenderCalendar() {
  //fetch info from database and add it to the events array
  events = [];
  $.ajax({
      type: "GET",
      url: "/SessionScheduler/GetEvents",
      success: function (data) {
      $.each(data, function (i, v) {    
           events.push({
               id: v.Id,
               title: v.Title,
               description: v.Description,
               start: moment(v.StartDate),
               end: moment(v.EndDate),
               tutorName: v.TutorName,
               color: v.ThemeColour
              });
        })
       //then display the calendar with the events
        GenerateCalender(events);
     },
     error: function (error) {
         alert('failed');
       }
    })
  }
  </code></pre>
  
  <p>This is the Save button where I want to have a validation check. <a href="https://stackoverflow.com/questions/2369683/is-there-a-way-to-prevent-overlapping-events-in-jquery-fullcalendar">I have looked at this solution but this didn't work for me</a></p>
  
  <pre><code>$('#btnSave').click(function () {
                      //validation
                      var selectedStartDate = moment(document.getElementById('txtStart').value.trim(), "DD/MM/YYYY HH:mm a").toDate();
                      var selectedEndDate = moment(document.getElementById('txtEnd').value.trim(), "DD/MM/YYYY HH:mm a").toDate();
                      if (selectedStartDate &gt; selectedEndDate) {
                          alert('Invalid end date');
                          return;
                      }
  
                      if (selectedStartDate.getTime() == selectedEndDate.getTime()) {
                          alert('Start/End dates can not be the same');
                          return;
                      }
  
                      var data = {
                          Id: $('#hdEventID').val(),
                          Title: $('#txtTitle').val(),
                          StartDate: $('#txtStart').val(),
                          EndDate: $('#txtEnd').val(),
                          Description: $('#txtDescription').val(),
                          TutorName: $('#txtTutorName').val(),
                          ThemeColour: $('#ddThemeColour').val()
                      }
                      SaveEvent(data);
                  })
  </code></pre>
  
  <p>SaveEvent function: Which saves the data</p>
  
  <pre><code>        function SaveEvent(data) {
              if (selectedEvent != null &amp;&amp; confirm("Are you sure?")) {
                  $.ajax({
                      type: "POST",
                      url: '/SessionScheduler/SaveEvent',
                      data: data,
                      success: function (data) {
                          if (data.status) {
                              //refresh the calendar if the status is true else its failed
                              FetchEventAndRenderCalendar();
                              $('#myModalSave').modal('hide'); //hide modal dialog pop window
                          }
                      },
                      error: function () {
                          alert('Failed');
                      }
                  })
              }
          }
  </code></pre>