Incorrect positioning (overlap) of allDay and non-allDay events in dayGridMonth with eventContent

[razor-1]

Reduced Test Case

https://codesandbox.io/p/sandbox/charming-franklin-4mimci

Do you understand that if a reduced test case is not provided, we will intentionally delay triaging of your ticket?

• [X] I understand

Which connector are you using (React/Angular/etc)?

React

Bug Description

This shares similarities with #7089 and #7060, however the problem here is not with multiple allDay events, but with the combination of an allDay and a non-allDay event.

When initially rendered, the allDay event overlaps with the non-allDay event. Then, as described in the other tickets, a rerender at some point causes things to get positioned correctly.

Screenshots:

[DenysPoliarush]

I have the same issue in Vue 3.

[bytewife]

I'd like to report more instances of this occurring:

• https://bay.lgbt/ (uses Vue3 plugin)
• https://anarchism.nyc/ (native Full-Calendar)

It makes many events unreadable!

[arshaw]

I'm having trouble recreating with the original sandbox link provided. I forked it, updated the current month, and you can see here that it does not displays the events incorrectly:

https://codesandbox.io/p/sandbox/interesting-sara-4cvx89

Could others please post additional reduced tests cases? @ivyraine, I can see the problems, but I don't know what version of FC it is, nor can I begin to debug.

[bytewife]

@arshaw Thanks for taking a look.

anarchism.nyc uses Full Calendar Native v6.14 bay.lgbt uses Full Calendar Vue3 v6.15

bay.lgbt would be probably be difficult to run locally because it's server-side rendered, but anarchism.nyc is client-side. Worth considering for local testing.

[arshaw]

FWIW, v6.1.7 made some improvements to event positioning for the React and Vue connectors. Maybe it fixed this problem.

If anyone can make a reproduction of this in an isolated environment (so that I can use it to debug against), that'd be highly appreciated. https://fullcalendar.io/reduced-test-cases

[tjjevans1]

Still seeing this as part of my implementation of custom event content. Struggling to recreate in isolation. Perhaps linked to height="100%" and display: flex but unconfirmed.

Added a ref and datesSet handler to trigger a re-render via updateSize() when navigating between views or dates:

const calendarRef = useRef<FullCalendar>(null);

<FullCalendar
  events={events}
  eventContent={eventContent}
  datesSet={() => {
     setTimeout((): void => {
        calendarRef?.current?.getApi().updateSize();
      }, 0);
  }}
  ref={calendarRef}
/>