EventRender renders with wrong position

Question

I'm currently building a calendar with the timeline view to get a list of events per teacher. And I want to have a week view of the timeline without showing any time per day. Basically all event of each teacher of that specific day listed on top of each other. Which works if I don't have any custom rendering. It would look like this:

Without eventRender

But, I would like to have a Popover on hover of each event to show more information so I use custom event render to inject Ant Design Popover. And since I'm using react I use ReactDOM to render my custom event.

My code somewhat looks like:

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} />

But for some reason, the positioning of the event somehow got messed up due to improper top position. Also, the height of the column itself isn't tall enough for the amount of events rendered. Which looks like this:

With eventRender

My question is: How can I manage to render the custom events properly? Or how can I wrap my around the event element?

Update: Added codesandbox https://codesandbox.io/s/adoring-field-f1vrj

Thanks!

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