如何获取FullCalendar点击事件对应日期并传入链接

核心原则：不要手动解析重复事件的RRULE规则计算实例日期，FullCalendar在渲染每一个重复事件实例时，已经在点击回调参数中挂载了当前实例的准确时间属性，直接取用即可，可自动规避时区偏移、重复例外日期、跨天事件导致的计算误差。

具体实现步骤 #

• 初始化FullCalendar时，在eventClick回调中获取当前点击实例的时间：回调参数中的info.event.start属性，就是当前点击的这一条重复事件对应的实际发生时间，而非重复规则配置的全局起始时间。
• 按业务需求格式化日期后，拼接入跳转链接或接口请求参数即可。

可直接复用的代码示例 #

// 日历初始化配置
const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
  initialView: 'listDay', // 替换为你实际使用的列表视图类型，如listWeek/listMonth
  // 保留原有事件配置，包含每日重复规则即可，无需额外修改
  events: [
    {
      title: '每日定点事件',
      startTime: '09:00',
      rrule: 'FREQ=DAILY', // 原有每日重复配置
      duration: '01:00'
    }
  ],
  eventClick: (info) => {
    // 1. 获取当前点击实例的准确日期
    const instanceTime = info.event.start;

    // 2. 格式化为业务需要的日期格式，示例为YYYY-MM-DD格式
    const formatTargetDate = (date) => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    };
    const targetDate = formatTargetDate(instanceTime);

    // 3. 拼接参数实现跳转/数据请求
    // 示例：页面跳转到对应日期的历史记录页
    window.location.href = `/history?date=${targetDate}`;
    // 如果是弹窗拉取数据，直接把targetDate作为请求参数传入接口即可
  }
});

calendar.render();

避坑说明 #

• 不要读取事件extendedProps中存储的原始start字段，该字段是重复规则的起始配置时间，不是当前点击实例的发生时间。
• v4及更早版本的FullCalendar中，eventClick回调的事件对象同样携带对应实例的准确start属性，逻辑通用，仅参数命名有细微差异，可直接通过回调入参的event对象取时间。
• 若事件配置了跨天、重复排除日期（如某一天不触发重复事件）、自定义时区，直接取info.event.start的结果已经过框架层处理，不会出现日期计算偏差。

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