FullCalendar V6：如何在datesSet触发时调用resourceLaneDidMount钩子

核心逻辑说明 #

resourceLaneDidMount 仅在资源lane首次挂载时触发，点击prev/next切换日期后，lane不会重新挂载，因此原有检查逻辑不会再次执行。需要借助datesSet事件（日期范围变更时自动触发），在该事件中重新遍历所有资源lane，执行无事件状态的检查与自定义HTML渲染。

实现方案 #

1. 抽离复用逻辑：把resourceLaneDidMount中的检查代码抽成独立函数，方便在初始挂载和日期切换时重复调用。
2. 绑定datesSet事件：在日历配置中添加datesSet回调，遍历当前所有资源lane元素，调用抽离的检查函数。

完整代码示例 #

// 抽离核心检查函数，统一处理lane的事件状态
function checkResourceLaneEvents(laneEl) {
  if (laneEl.classList.contains('fc-timeline-lane')) {
    const theElement = laneEl.querySelectorAll('.fc-timeline-lane-frame > .fc-timeline-events')[0];
    setTimeout(() => {
      if (theElement.querySelectorAll('.fc-timeline-event-harness').length > 0) {
        console.log('该lane存在事件');
        // 此处可添加：移除无事件状态的自定义HTML（如果之前添加过）
        // laneEl.querySelector('.your-empty-state-class')?.remove();
      } else {
        console.log('该lane无事件');
        // 此处替换为你的自定义HTML渲染逻辑，比如：
        // theElement.insertAdjacentHTML('beforeend', '<div class="empty-week-tip">本周暂无事件</div>');
      }
    }, 0); // 小延迟确保日历DOM更新完成
  }
}

// FullCalendar初始化配置
document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    initialView: 'resourceTimelineWeek',
    resources: [
      // 你的资源配置示例
      { id: 'res1', title: '资源1' },
      { id: 'res2', title: '资源2' }
    ],
    events: [
      // 你的事件配置示例
    ],
    // 初始挂载时执行检查
    resourceLaneDidMount: function(arg) {
      checkResourceLaneEvents(arg.el);
    },
    // 日期切换时重新遍历所有lane执行检查
    datesSet: function() {
      document.querySelectorAll('.fc-timeline-lane').forEach(laneEl => {
        checkResourceLaneEvents(laneEl);
      });
    }
  });

  calendar.render();
});

注意事项 #

• 抽离函数后，避免了代码冗余，同时保证初始加载和日期切换时逻辑一致。
• setTimeout的作用是等待日历DOM更新完成后再执行检查，防止获取到未更新的元素状态。
• 在无事件分支中，可根据需求替换成自己的自定义HTML内容，比如空状态提示、占位组件等。

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