使用FullCalendar：修改事件A时同步变更事件B属性的方法

当然可以做到！我之前做类似需求的时候用过几种可行的方法，给你详细拆解下：

核心思路 #

通过FullCalendar提供的事件监听API，捕获事件点击（或其他变更）的动作，定位到同一天的目标事件，用官方API修改其属性并自动触发日历重新渲染。

具体步骤&代码示例 #

1. 初始化日历并绑定事件监听 #

首先在日历初始化时，绑定eventClick回调函数（如果需要监听事件拖拽、修改等操作，还可以搭配eventDrop/eventResize）。

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    // 示例事件：给同一天的事件统一设置groupId，方便后续快速定位
    events: [
      {
        id: 'A-20240520',
        title: '事件A',
        start: '2024-05-20',
        allDay: true,
        groupId: 'day-20240520',
        eventType: 'A' // 自定义标识，方便区分事件类型
      },
      {
        id: 'B-20240520',
        title: '事件B',
        start: '2024-05-20',
        allDay: true,
        groupId: 'day-20240520',
        eventType: 'B'
      }
    ],
    // 点击事件时触发的回调
    eventClick: function(info) {
      // 判断当前点击的是事件A（用自定义标识或id前缀都可以）
      if (info.event.eventType === 'A') {
        // 方式1：通过groupId快速定位同一天的事件B（推荐，效率更高）
        const targetEvents = calendar.getEvents(event => {
          return event.groupId === info.event.groupId && event.eventType === 'B';
        });

        // 方式2：如果没设置groupId，用日期过滤定位
        // const targetDate = info.event.start.toISOString().split('T')[0];
        // const targetEvents = calendar.getEvents(event => {
        //   const eventDate = event.start.toISOString().split('T')[0];
        //   return eventDate === targetDate && event.eventType === 'B';
        // });

        // 找到事件B后修改属性
        if (targetEvents.length > 0) {
          const eventB = targetEvents[0];
          // 单个属性修改用setProp
          eventB.setProp('title', '事件B已同步更新');
          eventB.setProp('backgroundColor', '#ff4444');
          
          // 多个属性批量修改用setProps
          // eventB.setProps({
          //   title: '事件B已同步更新',
          //   backgroundColor: '#ff4444',
          //   borderColor: '#cc0000'
          // });

          // FullCalendar v5+版本中，setProp/setProps会自动触发渲染，无需手动调用updateEvent
          // 低版本可能需要补充：calendar.updateEvent(eventB);
        }
      }
    }
  });

  calendar.render();
});

2. 关键细节提醒 #

• 事件定位优先级：优先用groupId给同一天的事件分组，比日期过滤更高效，尤其是日历事件较多时。
• 属性修改规范：必须用FullCalendar提供的setProp()/setProps()方法修改事件属性，直接修改事件对象的属性不会触发日历重新渲染。
• 多事件场景适配：如果同一天存在多个非目标事件，一定要加自定义标识（比如eventType）来精准过滤，避免误修改其他事件。

3. 扩展场景：事件A发生其他变更时同步 #

如果需要在事件A被拖拽、调整时长等操作时同步修改事件B，可以监听对应的事件：

• eventDrop：事件被拖拽到新日期时触发
• eventResize：事件时长被修改时触发
• eventChange：事件任何属性变更时触发（FullCalendar v6+支持）

用法和eventClick完全一致，在回调中定位目标事件并修改属性即可。

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