如何优化FullCalendar周视图中「更多事件」的eventDidMount？

针对周视图大量事件导致的图片预加载性能问题，我们可以通过区分可见/隐藏事件+监听更多按钮点击的方式实现懒加载，具体方案如下：

1. 修改eventDidMount，标记需懒加载的事件 #

在eventDidMount中，只给主视图（非弹出层）的可见事件添加图片，给隐藏在「+X更多」弹出层的事件标记特殊类名，方便后续识别：

eventDidMount: function(info) {
  // 判断事件是否在主日历视图中（非popover弹出层）
  const isVisibleInMainView = !info.el.closest('.fc-more-popover');
  
  if (isVisibleInMainView) {
    // 直接给可见事件添加图片
    addEventImage(info.el, info.event);
  } else {
    // 给隐藏事件添加懒加载标记类
    info.el.classList.add('needs-lazy-image');
    // 确保事件元素绑定ID，方便后续关联event对象（FullCalendar默认已添加，可按需补全）
    info.el.setAttribute('data-event-id', info.event.id);
  }
}

2. 监听「+X更多」按钮点击，动态加载图片 #

利用FullCalendar内置的moreLinkClick事件，在用户点击更多按钮弹出隐藏事件列表时，批量给标记过的事件添加图片：

moreLinkClick: function(info) {
  // 等待弹出层DOM渲染完成（动态元素需要延迟获取）
  setTimeout(() => {
    // 获取弹出层内所有需懒加载图片的事件元素
    const lazyEventElements = info.popoverEl.querySelectorAll('.needs-lazy-image');
    
    lazyEventElements.forEach(el => {
      // 通过绑定的ID获取对应的event对象
      const eventId = el.getAttribute('data-event-id');
      const targetEvent = calendar.getEventById(eventId);
      
      if (targetEvent) {
        // 给事件添加图片
        addEventImage(el, targetEvent);
        // 移除标记类，避免重复加载
        el.classList.remove('needs-lazy-image');
      }
    });
  }, 100);
}

3. 封装图片添加逻辑（复用代码） #

把添加图片的逻辑抽成独立函数，避免重复代码：

function addEventImage(eventElement, calendarEvent) {
  // 从event的扩展字段中获取图片地址（根据你的实际数据结构调整）
  const imageUrl = calendarEvent.extendedProps.imageUrl;
  
  if (imageUrl) {
    const img = document.createElement('img');
    img.src = imageUrl;
    // 根据需求设置图片样式
    img.style.width = '24px';
    img.style.height = '24px';
    img.style.marginRight = '8px';
    // 将图片插入到事件元素的最前面
    eventElement.prepend(img);
  }
}

关键注意点 #

• moreLinkClick事件是FullCalendar官方提供的，专门用于监听「更多」按钮的点击行为，能直接获取弹出层DOM元素。
• 使用setTimeout是因为弹出层是动态生成的，需要等待DOM渲染完成才能获取内部元素；如果需要更精准的监听，可以用MutationObserver替代。
• 确保每个事件都有唯一ID，FullCalendar默认会给事件元素添加data-event-id属性，若未自动添加，可手动在eventDidMount中设置。

内容的提问来源于stack exchange，提问作者Abbas Eren Kılıç