React FullCalendar中如何从重复事件的点击回调获取实例日期？

当使用FullCalendar的RRule插件创建重复事件时，点击展开后的实例，虽然返回的event对象保留了原始的rrule配置，但你可以通过eventClickInfo对象的两个属性直接获取当前点击实例的具体日期：

• info.event.start：这是当前被点击的重复事件实例的实际开始时间，FullCalendar会自动为该实例注入这个属性，替换原始事件的通用时间，同时保留rrule配置。
• info.date：对应用户点击的日历单元格的日期（全天事件）或具体时间点（定时事件），适合快速获取点击的日期维度信息。

示例代码（React） #

const handleEventClick = (info) => {
  // 获取实例的精确开始时间
  const instanceStart = info.event.start;
  // 获取点击的日历日期
  const clickedCalendarDate = info.date;

  // 后续更新操作示例
  console.log('用户点击的实例日期:', instanceStart.toLocaleString());
};

// 在FullCalendar组件中绑定事件
<FullCalendar
  plugins={[dayGridPlugin, rrulePlugin]}
  events={[
    {
      title: 'my recurring event',
      rrule: 'DTSTART:20120201T103000Z\nRRULE:FREQ=WEEKLY;INTERVAL=5;UNTIL=20120601;BYDAY=MO,FR'
    }
  ]}
  eventClick={handleEventClick}
/>

需要注意的是，若要对单个重复实例进行修改（比如创建例外），可以基于获取到的实例日期，结合原始rrule生成新的规则或添加例外事件。

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