EventRender отображает с неправильной позицией - PullRequest
Новая
       10

EventRender отображает с неправильной позицией

0 голосов
/ 07 февраля 2020

В настоящее время я создаю календарь с представлением временной шкалы, чтобы получить список событий для каждого учителя. И я хочу иметь недельный просмотр графика времени, не показывая никакого времени в день. В основном все события каждого учителя этого определенного c дня перечислены друг над другом. Который работает, если у меня нет никакого специального рендеринга. Это выглядело бы так:

Без eventRender

Но я бы хотел, чтобы при каждом всплывающем окне всплывающее окно отображало дополнительную информацию, поэтому я использую пользовательскую визуализацию событий. ввести Муравей Дизайн Поповер. И поскольку я использую реагирование, я использую 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} />

Но по какой-то причине позиционирование события каким-то образом испортилось вверх из-за неправильной верхней позиции. Кроме того, высота самого столбца недостаточно высока для количества отображаемых событий. Что выглядит следующим образом:

С помощью eventRender

Мой вопрос: как мне правильно отобразить пользовательские события? Или как мне обернуть вокруг себя элемент события?

Обновление: добавлены кодыandbox https://codesandbox.io/s/adoring-field-f1vrj

Спасибо!

1 Ответ

0 голосов
/ 07 февраля 2020 
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

...