FullCalendar重复分组事件eventDrop：如何获取首尾事件的新开始时间？

Absolutely! When you drag any event in a grouped recurring set in FullCalendar and the whole group shifts, you totally can grab the new start times of the first and last events in that updated group. Let me walk you through how to do this effectively:

• Use the eventDrop callback as your trigger
  This is the core event that fires whenever an event is dragged to a new date. Even for grouped recurring events, this callback will activate, giving you access to the updated event data. The trick here is to fetch the entire associated group once the drop happens.

• Fetch the full group of events
  You’ll need a way to identify all events in the same group—most commonly, you’d add a custom groupId property to each event’s extendedProps when creating them. Then, use FullCalendar’s getEvents() method to filter events matching that group ID. Here’s a concrete example:

  document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
      // Your existing calendar configuration (views, events, etc.)
      eventDrop: function(info) {
        // Filter all events to get only those in the same group as the dragged event
        const groupedEvents = calendar.getEvents().filter(event => 
          event.extendedProps.groupId === info.event.extendedProps.groupId
        );
        
        // Sort the group by start time to easily pick first and last
        const sortedGroup = groupedEvents.sort((a, b) => 
          a.start.getTime() - b.start.getTime()
        );
        
        // Extract the new start times
        const firstEventNewStart = sortedGroup[0].start;
        const lastEventNewStart = sortedGroup[sortedGroup.length - 1].start;
        
        // Use these values however you need (log, update backend, etc.)
        console.log("First event's new start:", firstEventNewStart.toLocaleString());
        console.log("Last event's new start:", lastEventNewStart.toLocaleString());
      }
    });
    calendar.render();
  });
  

• Key things to keep in mind

  • If you’re using FullCalendar’s native recurrence system (via the recurrenceRule property), you can use the recurrenceId property instead of a custom groupId to group related events.
  • The start property returns a JavaScript Date object, so you can format it using built-in methods like toLocaleString() or a library like Luxon if you need specific date formats.
  • Ensure your initial event data includes the grouping identifier (either custom groupId or native recurrenceId) so the filter works correctly.

内容的提问来源于stack exchange，提问作者Li Li