订阅事件时如何实现FullCalendar的动态重新渲染？

我帮你梳理下问题的核心和解决方案，同时澄清你对refetchEvents方法的疑问：

一、实现实时渲染+支持事件删除的正确方案 #

你之前的代码已经接近正确，但无法删除事件的问题，通常是因为两个核心原因：

1. 事件对象缺少唯一的id属性，FullCalendar需要这个ID来精准识别和删除事件；
2. 重复添加事件源导致旧事件没有被彻底清除。

修正后的代码示例 #

this.store.select(fromEvents.selectAll)
.subscribe(a => {
  this.events = a;
  const calendarEl = $('#schedule');
  
  // 1. 先移除所有现有事件
  calendarEl.fullCalendar('removeEvents');
  // 2. 移除之前绑定的本地事件源（避免重复添加导致事件堆积）
  calendarEl.fullCalendar('removeEventSource', this.events);
  // 3. 添加更新后的事件数组作为新的事件源
  calendarEl.fullCalendar('addEventSource', a);
  // 4. 强制日历重新渲染所有事件
  calendarEl.fullCalendar('rerenderEvents');
});

关键注意事项 #

• 确保你的每个事件对象都包含唯一的id字段，比如：

  {
    id: 'event-1', // 必须唯一
    title: '测试事件',
    start: '2024-05-20',
    // 其他字段...
  }
  

• 如果你的事件源是通过events选项初始化的，也可以直接替换整个事件源数组：

  calendarEl.fullCalendar('option', 'events', a);
  

  这种方式更简洁，会自动触发重新渲染，不需要额外调用rerenderEvents。

二、关于refetchEvents方法的作用澄清 #

首先纠正一个笔误：正确的方法名是refetchEvents（复数形式），它的作用是让FullCalendar重新请求所有已配置的远程事件源（比如API接口、Google日历等）的数据。

如果你的事件数据是来自本地store的静态数组，调用refetchEvents不会有任何效果——因为它不会主动读取本地数组的更新，只会触发远程数据源的重新拉取。这也是为什么你之前调用它没有实现实时渲染的原因。

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