无法使Google Calendar重复事件通过rrule在FullCalendar中显示

一、重复事件不显示的原因及修复 #

你当前的事件数据存在两个关键问题，导致FullCalendar无法正确渲染重复事件：

1. duration格式不符合要求
   FullCalendar的rrule插件要求duration必须使用ISO 8601时长格式（例如PT30M代表30分钟），而非你当前使用的HH:mm格式。请将"duration": "00:30"修改为"duration": "PT30M"。

2. until字段格式不匹配
   你的dtstart包含具体时间（2022-09-14T15:00:00.000Z），但until仅提供了日期（2022-12-31），这会被解析为2022-12-31T00:00:00.000Z，导致12月31日的事件（15:00 UTC开始）超过结束时间，甚至可能让整个规则失效。建议将until改为包含时间的ISO字符串，比如"2022-12-31T23:59:59.000Z"，确保当天的事件能正常显示。

修复后的事件数据示例：

{
    "id": "6cvikr7n7g7ctler24dr1lgkjf",
    "title": "Test recurring event",
    "backgroundColor": "#9fe1e7",
    "borderColor": "#9fe1e7",
    "rrule": {
        "freq": "daily",
        "dtstart": "2022-09-14T15:00:00.000Z",
        "interval": 1,
        "until": "2022-12-31T23:59:59.000Z"
    },
    "duration": "PT30M"
}

3. 额外验证点
   确保你已正确加载并注册rrule插件：

• 若使用模块化方案（如React/Vue），需在FullCalendar的plugins数组中包含RrulePlugin；
• 若使用CDN，需引入@fullcalendar/rrule对应的脚本文件。

二、Google Calendar重复规则转FullCalendar rrule的方法 #

Google Calendar API返回的重复事件会包含recurrence字段，其值是标准的iCalendar RRULE字符串（例如RRULE:FREQ=DAILY;INTERVAL=1;UNTIL=20221231T235959Z）。你可以用rrule.js库直接解析该字符串，转换为FullCalendar兼容的rrule对象：

示例代码（JS）：

import { RRule } from 'rrule';

// 从Google Calendar API获取的recurrence字符串
const googleRecurrence = "RRULE:FREQ=DAILY;INTERVAL=1;UNTIL=20221231T235959Z;DTSTART=20220914T150000Z";

// 解析为RRule对象
const rruleObj = RRule.fromString(googleRecurrence);

// 转换为FullCalendar需要的格式
const fcRrule = {
  freq: rruleObj.options.freq.toString().toLowerCase(), // 转成小写字符串如"daily"
  dtstart: rruleObj.options.dtstart.toISOString(),
  interval: rruleObj.options.interval,
  until: rruleObj.options.until?.toISOString()
};

// 再搭配duration生成FullCalendar事件
const fcEvent = {
  id: "your-event-id",
  title: "Event Title",
  rrule: fcRrule,
  duration: "PT30M" // 根据Google事件的时长设置
};

无需额外第三方工具，rrule.js是处理RRULE的标准库，完全兼容Google Calendar的规则格式。

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