EventRender 以错误的位置呈现

Question

我目前正在构建一个带有时间轴视图的日历，以获取每位教师的活动列表。我想查看一周的时间线视图，而不显示每天的任何时间。基本上，特定日期每位老师的所有事件都列在彼此之上。如果我没有任何自定义渲染，这会起作用。它看起来像这样：

Without eventRender

但是，我希望在悬停每个事件时有一个 Popover 以显示更多信息，因此我使用自定义事件渲染来注入 Ant Design Popover。因为我使用的是 React，所以我使用 ReactDOM 来呈现我的自定义事件。

我的代码有点像：

const EventDetail = ({ event, el }) => {
  const content = <div>{event.title}<div>{event.description}</div></div>;

  ReactDOM.render(
  <Popover content={content}>
     {event.title}
  </Popover>,
  el);
};

<FullCalendar 
  {...someOtherProps}
  views={{
          customWeek: {
           type: 'resourceTimeline',
           duration: { weeks: 1 },
           slotDuration: { days: 1 },
          },
   }}
   eventRender={EventDetail} />

但不知为何，活动的定位莫名其妙地因为置顶不当而搞乱了。此外，列本身的高度对于呈现的事件数量来说不够高。看起来像这样：

With eventRender

我的问题是：如何设法正确呈现自定义事件？或者我如何环绕事件元素？

更新：添加了codesandbox https://codesandbox.io/s/adoring-field-f1vrj

谢谢！

Answer 1

eventRender={info => {
      info.el.id = `event-${info.event.id}`;
      const content = <div>Description of {info.event.title}</div>;
      setTimeout(() => {
        ReactDOM.render(
          <Popover content={content}>{info.event.title}</Popover>,
          document.getElementById(`event-${info.event.id}`)
        );
      });

      return info.el;
    }}

Codesandbox：https://codesandbox.io/s/adoring-field-f1vrj

EventRender 以错误的位置呈现

EventRender renders with wrong position

css

reactjs

fullcalendar

popover