Angular12+FullCalendar5.8.0中addEventSource加载事件耗时过长求助

• 前置过滤非视图范围内事件
  先根据日历当前视图的时间范围，过滤掉不在该范围内的事件，减少传递给FullCalendar的事件数量。比如当前显示月视图时，只保留该月的事件，其他月份的事件暂不加载。

  // 示例：筛选当前视图范围内的事件
  const activeRange = calendar.getCalendar().getCurrentData().activeRange;
  const filteredEvents = events.filter(event => {
    const eventStart = new Date(event.start);
    const eventEnd = new Date(event.end || event.start);
    return eventEnd >= activeRange.start && eventStart <= activeRange.end;
  });
  calendar.getCalendar().addEventSource(filteredEvents);
  

• 开启虚拟滚动功能
  FullCalendar 5支持虚拟滚动，开启后仅渲染当前可视区域内的事件，避免一次性渲染全部事件。根据使用的视图类型配置对应参数：

  calendarOptions = {
    plugins: [DayGridPlugin, TimeGridPlugin],
    initialView: 'dayGridMonth',
    scrollTimeGrid: true, // 针对时间网格视图
    lazyFetching: true, // 月视图下延迟加载数据
  };
  

• 分批异步加载事件
  不要一次性传入全部5000条事件，而是分批次在浏览器空闲时加载，避免阻塞主线程导致页面空白：

  // 分批加载示例
  const batchSize = 1000;
  let currentIndex = 0;
  
  const loadBatch = () => {
    const batch = events.slice(currentIndex, currentIndex + batchSize);
    calendar.getCalendar().addEventSource(batch);
    currentIndex += batchSize;
    if (currentIndex < events.length) {
      requestIdleCallback(loadBatch);
    }
  };
  
  loadBatch();
  

• 精简优化事件数据结构
  移除事件对象中FullCalendar不需要的自定义字段，只保留start、end、title等必需字段；同时提前将日期字符串转换为Date对象，避免组件重复解析：

  // 预处理事件数据
  const optimizedEvents = events.map(event => ({
    start: new Date(event.start),
    end: event.end ? new Date(event.end) : undefined,
    title: event.title,
    id: event.id // 仅保留必要的自定义字段
  }));
  

• 关闭不必要的交互特性
  禁用不需要的交互功能，减少渲染时的计算开销：

  calendarOptions = {
    editable: false, // 关闭事件拖拽、调整大小
    eventClick: () => false, // 关闭默认事件点击弹窗
    eventTooltip: false, // 关闭事件提示框（如果不需要）
  };
  

• 使用函数式事件源
  让FullCalendar在切换视图或需要数据时，才动态请求对应范围的事件，而非一次性加载全部：

  calendarOptions = {
    eventSources: [
      function(info, successCallback) {
        // 根据当前视图的时间范围过滤事件
        const filteredEvents = events.filter(event => {
          const eventStart = new Date(event.start);
          const eventEnd = new Date(event.end || event.start);
          return eventEnd >= info.start && eventStart <= info.end;
        });
        successCallback(filteredEvents);
      }
    ]
  };
  

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