React FullCalendar 选中空日期/时段时无法返回自定义JSX组件

你实现失效的核心是混淆了FullCalendar两类配置的设计逻辑：

• eventContent属于内容渲染类配置，专门用来定义日程事件在日历内部的展示结构，返回的JSX会被正常渲染到页面上
• select、dateClick都属于事件回调类配置，仅用来响应点击/框选动作，函数的返回值会被FullCalendar完全丢弃，永远不会被渲染

1. 调整事件回调逻辑 #

不要在select/dateClick回调中返回JSX，仅需要将点击获取的时间信息、触发点击的DOM元素存入React state，用来控制弹窗的定位和内容。
如果需要单击空白就触发弹窗，使用dateClick配置即可，修改后的FullCalendar配置如下：

// 新增state存储弹窗定位、内容所需信息
const [popoverAnchor, setPopoverAnchor] = useState(null);
const [blankClickInfo, setBlankClickInfo] = useState(null);

<FullCalendar
  plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
  slotMinTime="08:00:00"
  slotMaxTime="20:00:00"
  selectable={true}
  headerToolbar={{
    left: "prev,next today",
    center: "title",
    right: "dayGridMonth,timeGridWeek,timeGridDay",
  }}
  events={events}
  // 替换原有的无效select配置
  dateClick={(info) => {
    // 存储触发点击的DOM元素，作为Popover的定位锚点
    setPopoverAnchor(info.jsEvent.target);
    // 存储点击对应的时间信息，传给弹窗组件
    setBlankClickInfo(info);
    // 保留原有的弹窗状态控制逻辑
    setSelectedEvent(null);
    setModalAction('create');
    setOpen(true);
  }}
  eventContent={(info) => {
    return (
      <RenderAppointmentClickedActions
        eventContent={info}
        setSelectedEvent={setSelectedEvent}
        setModalAction={setModalAction}
        setOpen={setOpen}
      />
    );
  }}
/>

如果你需要用户拖拽框选一段时间后才触发弹窗，只需要将dateClick逻辑迁移到select回调中，从回调参数里获取对应的DOM锚点和时间信息存入state即可。

2. 同级渲染Popover组件 #

将Material-UI的Popover作为FullCalendar的同级元素放在同一个父容器下，通过存储的state控制弹窗的位置和内容：

{/* 和FullCalendar同级的弹窗渲染逻辑 */}
<Popover
  open={open}
  anchorEl={popoverAnchor}
  onClose={() => setOpen(false)}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'center',
  }}
>
  {/* 两个功能组件逻辑完全一致，可直接复用 */}
  <RenderDayClickedAction
    eventContent={blankClickInfo}
    setSelectedEvent={setSelectedEvent}
    setModalAction={setModalAction}
    setOpen={setOpen}
  />
</Popover>

• 之前验证interactionPlugin触发事件点击日志正常，说明插件配置没有问题，只是配置项的用途匹配错误
• 两个功能完全一致的渲染组件后续可以合并为同一个，减少冗余代码

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