[SOLVED] Get oldEvent info from FullCalendar

Get oldEvent info from FullCalendar

I have eventResize and eventDrop functions like this. How to get the existing event's old start and datetime that is being dragged to a new date or is being resized?

var calendar = new Calendar(calendarEl, {

   events: [
   // events here
   ],

   editable: true,

   eventDrop: function(info) {
      alert(info.event.title + " was dropped on " + info.event.start.toISOString());

      if (!confirm("Are you sure about this change?")) {
        info.revert();
      }
   },
   eventResize: function(info) {
      alert(info.event.title + " end is now " + info.event.end.toISOString());

      if (!confirm("is this okay?")) {
        info.revert();
      }
   }

});

Solution

You can reach the old event values by eventDrop - oldEvent and eventResize - oldEvent properties. info.oldEvent.start.toISOString() gives the old start datetime.

DEMO:

document.addEventListener('DOMContentLoaded', function() {
  var Calendar = FullCalendar.Calendar;
  var Draggable = FullCalendar.Draggable;

  var containerEl = document.getElementById('external-events');
  var calendarEl = document.getElementById('calendar');
  var checkbox = document.getElementById('drop-remove');

  // initialize the external events
  // -----------------------------------------------------------------

  new Draggable(containerEl, {
    itemSelector: '.fc-event',
    eventData: function(eventEl) {
      return {
        title: eventEl.innerText
      };
    }
  });

  // initialize the calendar
  // -----------------------------------------------------------------

  var calendar = new Calendar(calendarEl, {
    events: [
     // events here
    ],

    editable: true,

    eventDrop: info => {
      /** oldEvent stores the old event values. See: https://fullcalendar.io/docs/eventDrop */
        console.log(`${info.event.title} old start datetime: ${info.oldEvent.start.toISOString()}`);
        console.log(info.event.title + " was dropped on " + info.event.start.toISOString());

        //if (!confirm("Are you sure about this change?")) {
          //info.revert();
        //}
    },
    eventResize: info => {
      /** oldEvent stores the old event values. See: https://fullcalendar.io/docs/eventResize */
        console.log(`${info.event.title} old start datetime: ${info.oldEvent.start.toISOString()}`);
        console.log(info.event.title + " end is now " + info.event.end.toISOString());

        //if (!confirm("is this okay?")) {
          //info.revert();
        //}
     }
  });

  calendar.render();
});

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#external-events {
  position: fixed;
  z-index: 2;
  top: 20px;
  left: 20px;
  width: 150px;
  padding: 0px 10px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #eee;
}

#external-events .fc-event {
  cursor: move;
  margin: 3px 0;
}

#calendar-container {
  position: relative;
  z-index: 1;
  margin-left: 200px;
}

#calendar {
  max-width: 1100px;
  margin: 20px auto;
}

.as-console-wrapper {
  z-index: 999;
  max-height: 60px!important;
}

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js" ></script>

<div id='external-events'>
  <p>
    <strong>Draggable Events</strong>
  </p>
  <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
    <div class='fc-event-main'>Custom Event 1</div>
  </div>
  <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
    <div class='fc-event-main'>Custom Event 2</div>
  </div>
  <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
    <div class='fc-event-main'>Custom Event 3</div>
  </div>
</div>
<div id='calendar-container'>
  <div id='calendar'></div>
</div>