如何为FullCalendar事件渲染React-Bootstrap Popover组件？

核心问题澄清 #

• FullCalendar V5的eventDidMount不是用来渲染React组件的，它是事件DOM元素挂载完成后触发的钩子，仅用于做DOM操作（比如添加样式类、绑定原生事件），它替代的是V4中eventRender的DOM处理部分。如果要自定义事件的React内容，应该用eventContent钩子。
• 你之前的错误在于试图用eventDidMount返回React组件，这不符合该钩子的设计逻辑，所以Popover无法生效。

修正后的实现代码 #

import { useState, useRef } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import { Overlay, Popover } from 'react-bootstrap';

export function Calendar({ calData }) {
  const [showPopover, setShowPopover] = useState(false);
  const [popoverTarget, setPopoverTarget] = useState(null);
  const [currentEvent, setCurrentEvent] = useState(null);
  const popoverRef = useRef(null);

  // 处理日历事件点击
  const handleEventClick = (info) => {
    // 记录点击的事件数据和对应的DOM元素
    setCurrentEvent(info.event);
    setPopoverTarget(info.el);
    setShowPopover(true);
  };

  return (
    <div style={{ position: 'relative' }}>
      <FullCalendar
        plugins={[dayGridPlugin]}
        events={calData}
        eventClick={handleEventClick}
      />
      {/* Popover 直接挂载在日历外层，通过状态控制显示 */}
      <Overlay
        show={showPopover}
        target={popoverTarget}
        placement="top"
        rootClose
        onHide={() => setShowPopover(false)}
      >
        <Popover ref={popoverRef} id="event-popover">
          <Popover.Header as="h3">{currentEvent?.title}</Popover.Header>
          <Popover.Body>
            <p>开始时间: {currentEvent?.start?.toLocaleString()}</p>
            {currentEvent?.end && <p>结束时间: {currentEvent.end.toLocaleString()}</p>}
            {/* 可添加更多事件自定义内容 */}
          </Popover.Body>
        </Popover>
      </Overlay>
    </div>
  );
}

关键细节说明 #

• eventClick参数正确用法：FullCalendar的eventClick回调接收的是info对象，不是原生事件。要通过info.el获取事件对应的DOM元素作为Overlay的target；通过info.event获取事件的业务数据（比如标题、时间）。
• Popover挂载方式：直接把Popover组件放在日历的外层容器中，不需要通过FullCalendar的钩子注入，通过状态showPopover控制显示/隐藏即可。
• 定位与关闭逻辑：外层容器设置position: relative确保Overlay定位正确；利用React-Bootstrap Overlay的rootClose属性，实现点击外部区域自动关闭Popover的功能。

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