EventRender 以错误的位置呈现

EventRender renders with wrong position

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

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

谢谢!

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