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.