FullCalendar:We are facing issue when the Calendar view is Month and Height is less. When we scroll to the bottom of the Calendar and Hover on events

Viewed 20

popover_issue

As displayed is the image above the space between the popover and event increases on scrolling to the bottom of the screen.

    <FullCalendar
      initialView="dayGridMonth"
      ref={calendarRef}
      headerToolbar={{
        start: "",
        center: "prev title next",
        end: "dayGridMonth,timeGridWeek,timeGridDay",
      }}
      titleFormat="{MM/{DD}}/yyyy"
      plugins={[momentPlugin, dayGridPlugin, timeGridPlugin]}
      height="auto"
      contentHeight="auto"
      stickyHeaderDates="true"
      events={events}
      eventContent={contentToolTip}
      dayMaxEventRows={2}
      closeHint="close"
      moreLinkHint="more link"
      dayMaxEvents={2}
      moreLinkClick={(...args) => {
        setTimeout(() => {
          const popoverEl = document.querySelector('.fc-popover');
          if (!popoverEl) { return; }
          const left = parseInt(popoverEl.style.left, 10);
          popoverEl.style.left = `${left - 20}px`;
        }, 0);
      }}
      defaultAllDay={1 < 2}
      allDaySlot={1 > 2}
      expandRows={1 < 2}
      eventClick={(info) => {
        info.jsEvent.preventDefault();
        if (info.event.url) {
          window.open(info.event.url);
        }
      }}/>

Here are all the parameter I have used to render the Calendar.

0 Answers
Related