title: Allow events to be dragged only onto background events
body: <p>I am managing appointments on <code>fullcalendar</code>. I have available slots of time where I can create new appointments. Also I can drag appointments onto available time slots which are shown as <strong>background events</strong>.</p>
  
  <p>I only want the drop functionality on background event slots.</p>
  
  <p>I have tried the <code>eventOverlap</code> method but it only works when the event is dropped on a background event. If the event is dropped elsewhere then I am unable to detect whether I am dropping the event on background event or on empty slot.</p>
  
  <pre><code>var calendarEl = document.getElementById('calendar');
  
  var calendar = new FullCalendar.Calendar(calendarEl, {
      defaultView: 'timeGridWeek',
      // height: 1080,
      plugins: ['dayGrid', 'timeGrid', 'interaction'],
      header: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
  
      events: {
          url: getUrl(),
          failure: function() {
              toastr.error('Unable to load calendar data, Please try later');
          },
          success: function() {
  
          }
      },
  
  
      loading: function(bool) {
  
      },
      defaultDate: Date.now(),
  
      editable: true,
      eventLimit: true,
      eventClick: function(info) {
  
          if (info.event.extendedProps.type == 'Calendar') {
              showCreateModal(info.event);
          }
          if (info.event.extendedProps.type == "Appointment") {
              showUpdateModal(info.event);
          }
      },
  
      eventOverlap: function(stillEvent, movingEvent) {
          return stillEvent.extendedProps != '' &amp;&amp; stillEvent.extendedProps.type === 'Calendar' ? true : false;
      },
  
      eventDrop: function(info) {
          // check if event is being dropped on past date / slot
          if (moment(info.event.start) &lt; moment()) {
              info.revert();
              return;
          }
  
          // check if event is being dropped on future slot
          if (moment(info.event.start) &gt; moment()) {
              swal({
                      title: "Are you sure?",
                      text: "You are about to re-schedule this appointment!",
                      icon: "warning",
                      // buttons: true,
                      buttons: ["No", "Yes !"],
                      dangerMode: true,
                  })
                  .then((response) =&gt; {
                      if (response) {
                          submitForm(false, true, info.event);
                      } else {
                          info.revert();
                      }
                  });
          }
  
      }
  
  });
  
  calendar.render();
  </code></pre>
  
  <p>This is what I want:</p>
  
  <p><a href="https://i.stack.imgur.com/kyoVP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kyoVP.png" alt="enter image description here"></a></p>