如何阻止FullCalendar的moreLink弹出框点击外部时关闭？

要实现这个需求，你需要通过监听DOM事件并拦截触发关闭的外部点击行为，具体实现步骤如下：

核心思路 #

FullCalendar的“More”弹出框默认会在点击外部区域时触发关闭逻辑，我们可以通过在事件捕获阶段拦截外部点击事件，阻止FullCalendar的关闭代码执行，同时保留弹出框内部和“More”按钮的正常交互。

代码实现（Next.js 环境） #

import { useEffect } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

export default function CustomCalendar() {
  useEffect(() => {
    // 监听DOM变化，检测弹出框的显示状态
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(() => {
        const morePopover = document.querySelector('.fc-more-popover');
        // 弹出框已显示（offsetParent不为null表示元素可见）
        if (morePopover && morePopover.offsetParent !== null) {
          // 定义阻止外部关闭的处理函数（捕获阶段触发）
          const blockOutsideClose = (e) => {
            const isClickInsidePopover = morePopover.contains(e.target);
            const isClickOnMoreButton = e.target.closest('.fc-more-link') !== null;
            
            // 仅拦截弹出框外部、非More按钮的点击
            if (!isClickInsidePopover && !isClickOnMoreButton) {
              e.stopImmediatePropagation();
            }
          };

          // 在捕获阶段添加事件监听，优先于FullCalendar的关闭逻辑
          document.addEventListener('mousedown', blockOutsideClose, true);

          // 监听弹出框关闭，及时移除事件监听避免内存泄漏
          const checkPopoverClose = () => {
            if (morePopover.offsetParent === null) {
              document.removeEventListener('mousedown', blockOutsideClose, true);
              document.removeEventListener('mousedown', checkPopoverClose);
            }
          };
          document.addEventListener('mousedown', checkPopoverClose);
        }
      });
    });

    // 监听body下所有DOM节点的变化
    observer.observe(document.body, { childList: true, subtree: true });

    // 组件卸载时清理监听
    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    <FullCalendar
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
      events={[
        // 示例事件，数量过多时会触发More弹出框
        { title: '会议', start: '2024-05-15' },
        { title: '培训', start: '2024-05-15' },
        { title: '面试', start: '2024-05-15' },
        { title: '复盘会', start: '2024-05-15' }
      ]}
    />
  );
}

关键细节说明 #

1. 类名准确性：FullCalendar v6中，“More”弹出框的类名是fc-more-popover，触发按钮的类名是fc-more-link，可通过浏览器开发者工具确认。
2. 事件捕获阶段：使用addEventListener的第三个参数true，让拦截逻辑在FullCalendar的关闭代码之前执行，确保有效阻止关闭行为。
3. 内存泄漏防护：弹出框关闭后立即移除事件监听，避免不必要的资源占用。

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