事件渲染以错误的位置呈现

Question

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

没有事件渲染

但是，我希望在每个事件的悬停上都有一个弹出框以显示更多信息，因此我使用自定义事件渲染来注入 Ant 设计弹出框。由于我使用的是 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} />

但由于某种原因，由于顶部位置不当，事件的定位不知何故搞砸了。此外，列本身的高度不足以容纳呈现的事件量。看起来像这样：

使用事件渲染

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

更新：添加了代码沙盒 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;
}}

代码沙盒：https://codesandbox.io/s/adoring-field-f1vrj