FullCalendar 4中更新RRule重复事件及获取更新后RRule字符串方法

Hey there! I’ve worked with FullCalendar 4’s RRule integration before, so let’s walk through the best way to update the RRule (specifically the DTSTART property) after dragging a recurring event.

Step 1: Access the Event and Original RRule Data #

First, in your drag/drop callback (the one that gets the info parameter), grab two critical pieces of data:

• The new start time: This lives in info.event.start (it’s a Moment.js object in FullCalendar 4)
• The original RRule string (including DTSTART): I highly recommend storing this in the event’s extendedProps when you initialize it. If you did that, you can fetch it like this:

  const originalRRuleStr = info.event.extendedProps.rrule;
  

Step 2: Parse the Original RRule and Update DTSTART #

FullCalendar relies on the rrule library under the hood, so we’ll use that to tweak the rule:

1. Split the original string to separate DTSTART and the RRULE definition (since RRule’s parser focuses on the RRULE part):

   // Split the full string into individual lines
   const [dtstartLine, rruleLine] = originalRRuleStr.split('\n');
   // Extract just the RRULE content (strip the "RRULE:" prefix)
   const originalRRuleDef = rruleLine.replace('RRULE:', '');
   // Parse the RRULE into an editable RRule object
   const originalRRule = RRule.fromString(originalRRuleDef);
   

2. Create a new set of RRule options, swapping out the old dtstart for the event’s new start time (convert Moment to a Date object first):

   const newRRuleOptions = {
     ...originalRRule.options,
     dtstart: info.event.start.toDate()
   };
   

Step 3: Generate the Updated RRule String (with DTSTART) #

Now build the full updated string that includes the new DTSTART and modified RRULE:

// Format the new DTSTART to match iCalendar standards (UTC time)
const newDtstart = info.event.start.utc().format('YYYYMMDDTHHmmss') + 'Z';
// Create the updated RRULE definition
const newRRuleDef = new RRule(newRRuleOptions).toString();
// Combine into the full string (matching your original format)
const updatedRRuleStr = `DTSTART:${newDtstart}\nRRULE:${newRRuleDef}`;

Step 4: Save and Sync the Updated RRule #

You can now store updatedRRuleStr in your database. Also, update the event’s extendedProps to keep the calendar in sync for future edits:

info.event.setExtendedProp('rrule', updatedRRuleStr);

Quick Pro Tips #

• Time Zone Consistency: Always use UTC when formatting DTSTART to avoid time zone mismatches between your calendar and database.
• Store RRule Options (Optional): If you want to simplify future edits, save the original RRule options (not just the string) in extendedProps during initialization. This lets you skip parsing the string entirely and modify options directly.
• Test Edge Cases: Make sure to test scenarios like dragging to a different time zone or modifying complex recurring rules (e.g., monthly events tied to specific days of the month).

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