如何判断FullCalendar v6已完成所有事件的渲染？

你遇到的问题本质是eventSourceSuccess仅标记事件数据加载完成，而非所有事件DOM渲染完成，所以会出现面板提前关闭但事件还在渲染的情况。以下是几个更精准的事件及实现方案：

推荐使用：datesRendered 事件 #

这个事件会在当前视图的所有元素（包括事件）都完成渲染并添加到DOM后触发，完全匹配你需要的“所有事件渲染完成”时机。

实现步骤： #

1. 定义一个状态变量标记是否正在重新获取事件：

   let isRefetching = false;
   

2. 调用refetchEvents()时：

   // 开启玻璃面板
   showGlassPanel();
   isRefetching = true;
   calendar.refetchEvents();
   

3. 监听datesRendered事件关闭面板：

   document.addEventListener('DOMContentLoaded', function() {
     const calendarEl = document.getElementById('calendar');
     const calendar = new FullCalendar.Calendar(calendarEl, {
       // 其他配置...
       datesRendered: function(info) {
         if (isRefetching) {
           // 关闭玻璃面板
           hideGlassPanel();
           isRefetching = false;
         }
       },
       eventSourceFailure: function(info) {
         // 处理失败情况，关闭面板并重置标记
         hideGlassPanel();
         isRefetching = false;
         // 可选：添加错误提示
       }
     });
     calendar.render();
   });
   

备选方案：eventDidMount 批量计数 #

如果需要精确到每个事件都渲染完成，可以对所有加载的事件计数，当最后一个事件触发eventDidMount时关闭面板：

实现步骤： #

1. 定义变量存储待渲染事件数量：

   let pendingEventsCount = 0;
   let isRefetching = false;
   

2. 在events回调中获取事件总数：

   events: function(info, successCallback, failureCallback) {
     // 从存储获取事件列表
     const events = getUpdatedEventsFromStorage();
     if (isRefetching) {
       pendingEventsCount = events.length;
     }
     successCallback(events);
   }
   

3. 监听eventDidMount递减计数，完成后关闭面板：

   eventDidMount: function(info) {
     if (isRefetching) {
       pendingEventsCount--;
       if (pendingEventsCount === 0) {
         hideGlassPanel();
         isRefetching = false;
       }
     }
   },
   eventSourceFailure: function(info) {
     hideGlassPanel();
     isRefetching = false;
   }
   

   注意：这个方案需要考虑事件过滤（比如不在当前视图的事件不会触发eventDidMount），所以需要结合视图的日期范围筛选事件数量，复杂度更高，仅在特殊场景使用。

为什么eventSourceSuccess不合适？ #

eventSourceSuccess的触发时机是事件数据已传递给FullCalendar，但尚未开始渲染DOM，FC还需要执行事件排序、DOM创建、位置计算等操作，所以这个事件会早于实际渲染完成，导致面板提前关闭。

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