从 FullCalendar 获取旧事件信息

Question

我有这样的 eventResize 和 eventDrop 函数。如何获取现有事件的旧开始和日期时间（正在拖动到新日期或正在调整大小）？

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();
  }
 }

 });

Answer 1

您可以通过 eventDrop - oldEvent 和 eventResize - oldEvent 属性获取旧事件值。

info.oldEvent.start.toISOString()

给出旧的开始日期时间。

演示：

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/[email protected]/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>