Wrong events layout after changing events prop in react

[aukolov]

Reduced Test Case

https://stackblitz.com/edit/github-p6vnsq?file=src%2FDemoApp.jsx

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

• I understand

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

React

Bug Description

Issue: the layout of events spanning multiple days is corrupted on first render after updating events prop when custom event content is used. The layout is fixed on the next rerender.

To reproduce:

1. Click Switch button in the left top corner. This button updates events prop of FullCalendar with new events.
2. Check the events layout.
3. Click Force Rerender button.
4. Check the events layout again.

Expected: events are placed correctly immediately after click on Switch button, nothing changes after clicking Force Rerender
Actual: after click on Switch button, the second event is placed on top of the first event with 3px offset from the top. Only after Force Rerender click the events are placed correctly.

Observations:

1. Reproducible only with <React.StrictMode>.
2. Reproducible with events longer than 1 day (because absolute layout is not used for 1-day all-day events).
3. Reproducible only with custom event content (eventContent prop).

Screen.Recording.2023-06-29.at.1.38.45.PM.mov

[w990752800]

add dayMaxEvents: true props

[aukolov]

@w990752800 , thanks for the comment, but setting dayMaxEvents: true does not change the behavior, and also I need the calendar cells to extent to display all events at once, with this option, some events may be hidden.

[acerix]

I believe the issue is from using useState to reintialize the calendar when the state is changed. You can instead use the API to update events which should not have this issue:

https://fullcalendar.io/docs/events-function

[aukolov]

@acerix , thanks for the suggestion.

In the real application that I have instead of useState I have react-query's useQuery to get the events. React-wise the code where I set what I get from useState/useQuery to the calendar's events is more natural and it works well in all other scenarios.

Anyways, I have tried the idea of using eventsFunc instead of events prop, but the outcome is the same.
Please have a look if I got your idea correctly: https://stackblitz.com/edit/github-p6vnsq-9r3foh?file=src%2FDemoApp.jsx

[aukolov]

I have also simplified the original example by removing calendarRef as it was not actually used there.

<FullCalendar
        ref={calendarRef}

[arshaw]

Fixed in v6.1.11

@fullcalendar/react was getting tripped up on React strict-mode.

Updated repro:
https://stackblitz.com/edit/github-p6vnsq-qfc66y?file=package.json