Vue3/Vite集成Fullcalendar：eventAdd回调relatedEvents为空问题

AI 小北

2026-7-10

问题描述

技术栈为Vue3/Vite，后端采用GraphQL/Sequelize/MySQL。在应用中实现FullCalendar重复事件时，尝试通过eventAdd回调的relatedEvents属性获取所有重复事件并存入数据库，但该数组始终为空。

已通过按钮点击调用硬编码的重复事件创建函数，代码如下：

function createRecurEvents() {
  const uuid = uuidv4()
  const newEvent = {
    id: '100',
    title: 'title',
    startTime: '10:00:00',
    endTime: '12:00:00',
    groupId: uuid,
    startRecur: '2023-11-28',
    endRecur: '2023-12-28',
    daysOfWeek: [2, 4],
    resourceIds: ['7383e073-055e-4458-8dcc-e0f7fc2d3c56'],
  }
  fullCalendar.value.getApi().addEvent(newEvent)
}

重复事件已成功渲染到日历，但eventAdd回调打印的信息中relatedEvents始终为空——尽管日历已渲染约10个重复事件，且所有事件已设置groupId。尝试过有无id、有无事件源、多事件源及在addEvent中指定事件源等方式，均未解决问题。回调代码如下：

function handleEventAdd(addInfo: any) {
  console.log(addInfo)
}

期望relatedEvents数组能返回所有重复事件。

解决方案

FullCalendar的addEvent方法在添加重复事件时，默认仅返回主事件（即你传入的原始事件对象），relatedEvents不会自动填充所有生成的重复实例。要获取所有重复事件，可通过以下方式实现：

通过clientEvents方法按groupId筛选
所有重复事件共享同一个groupId，在eventAdd回调中利用该属性筛选出所有关联事件：

function handleEventAdd(addInfo: any) {
  const calendarApi = addInfo.view.calendar;
  // 筛选出同groupId下的所有重复事件
  const allRecurEvents = calendarApi.clientEvents(event => event.groupId === addInfo.event.groupId);
  console.log('所有重复事件:', allRecurEvents);
  // 此处可将allRecurEvents批量存入数据库
}

明确主事件与重复实例的关系
你传入的原始事件是主事件，FullCalendar自动生成的重复实例会带有唯一的_instanceId，但所有实例的groupId与主事件一致，这是筛选的核心依据。
放弃依赖relatedEvents
relatedEvents属性主要用于事件编辑场景（如拖拽修改重复事件时），添加事件时该属性为空是官方预期行为，无法通过常规配置使其自动填充。

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