FullCalendar刷新指定资源及关联事件时重复事件问题解决方案咨询

问题原因 #

FullCalendar 中资源和事件是独立的实体，仅通过 resourceId 建立关联，移除资源的操作默认不会级联删除对应关联的事件，因此重新添加同ID资源时，原有事件会自动重新绑定到新添加的同ID资源上，再新增事件就会出现重复。

实现方案 #

你可以在移除指定资源前，先筛选出所有关联该资源ID的事件，逐一删除后再执行资源移除、重新添加资源和新增事件的操作，具体代码如下：

var resourceId = '2';
var targetResource = calendar.getResourceById(resourceId);
if (targetResource) {
    // 第一步：筛选所有关联该资源的事件并删除
    var relatedEvents = calendar.getEvents().filter(event => event.resourceId === resourceId);
    relatedEvents.forEach(event => event.remove());
    
    // 第二步：移除旧资源
    targetResource.remove();
    
    // 第三步：重新添加资源
    var newResource = {
        id: resourceId,
        title: 'Resource 2'
    };
    calendar.addResource(newResource);
    
    // 第四步：添加新的关联事件
    var newEvents = [
        {
          resourceId : 2,
          start : "2021-09-22 00:30:00",
          end : "2021-09-22 01:30:00",
          title : "Event 1"
        },
        {
          resourceId : 2,
          start : "2021-09-22 02:30:00",
          end : "2021-09-22 03:30:00",
          title : "Event 2"
        }
    ];
    calendar.addEventSource(newEvents);
}

更优方案建议 #

如果你的场景是需要频繁刷新单个资源的事件，可以不用每次都删除重建资源，直接更新资源信息+刷新对应事件即可，性能更好：

var resourceId = '2';
// 1. 更新资源信息（如果有变动的话，无变动可以跳过这步）
var targetResource = calendar.getResourceById(resourceId);
if (targetResource) {
    targetResource.setProp('title', '新的资源名称');
}

// 2. 直接删除该资源原有事件，添加新事件即可，无需重建资源
var relatedEvents = calendar.getEvents().filter(event => event.resourceId === resourceId);
relatedEvents.forEach(event => event.remove());
// 直接添加新拉取的事件
calendar.addEventSource(fetchedNewEvents);

如果事件是从接口拉取，也可以给每个资源的事件单独绑定独立的事件源ID，刷新时直接调用 getEventSourceById 找到对应源移除后新增，无需遍历所有事件，效率更高。

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