FullCalendar v5如何为事件关联参会人员及实现查看编辑功能

资源方案合理性判断 #

你选择将参会人员作为资源处理的方案完全合理：

• FullCalendar v5 原生支持资源与事件的多对多绑定逻辑，单个事件可关联多个resourceId，刚好匹配单会议多参会人的业务场景
• 资源支持自定义扩展字段，可直接存储人员ID、所属部门、联系方式等额外属性，无需额外改造数据结构
• 后续如果需要拓展按人员维度展示日程（如每人一列展示所有参会会议），直接使用官方资源类视图即可实现，拓展性极强

可选更优轻量方案 #

如果你的业务不需要用到按人员拆分的资源视图，仅需要点击事件展示、编辑参会人列表，也可以选择更轻量的自定义扩展字段方案，无需引入资源模块：

• 给事件扩展attendees自定义字段，值为参会人员对象数组，存储对应人员信息
• 监听eventClick事件，触发后读取event.extendedProps.attendees字段渲染参会人列表到自定义弹窗
• 增删参会人操作完成后，调用event.setExtendedProp('attendees', 新的参会人数组)更新事件数据，同步刷新视图即可

两种方案选择逻辑：有按人员维度展示日程需求选资源方案，仅需事件关联参会人信息选自定义字段方案，冗余度更低。

核心实现示例 #

自定义字段方案核心代码 #

// 日历初始化配置
const calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'dayGridMonth',
  events: [
    {
      title: '会议1',
      start: '2024-05-20 10:00',
      end: '2024-05-20 11:00',
      attendees: [
        {id: 'u1', name: '参会人1'},
        {id: 'u2', name: '参会人2'}
      ]
    }
  ],
  eventClick: (info) => {
    // 读取参会人数据渲染自定义弹窗
    const attendees = info.event.extendedProps.attendees;
    renderAttendeeModal(attendees, info.event);
  }
});

// 参会人更新后调用的同步方法
function updateAttendees(event, newAttendees) {
  event.setExtendedProp('attendees', newAttendees);
  // 此处可补充后端接口调用逻辑持久化数据
}

资源方案核心代码 #

const calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'resourceTimelineDay',
  // 配置参会人资源列表
  resources: [
    {id: 'u1', title: '参会人1'},
    {id: 'u2', title: '参会人2'},
    {id: 'u3', title: '参会人3'}
  ],
  events: [
    {
      title: '会议1',
      start: '2024-05-20 10:00',
      end: '2024-05-20 11:00',
      // 关联多个参会人资源ID
      resourceIds: ['u1', 'u2']
    }
  ],
  eventClick: (info) => {
    // 匹配关联的参会人资源
    const attendees = calendar.getResources().filter(res => 
      info.event.resourceIds.includes(res.id)
    );
    renderAttendeeModal(attendees, info.event);
  }
});

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