Changing Date Range on docs breaks Events

[bvergara87]

Check that this is really a bug

• I confirm

Reproduction link

docs

Bug description

When changing the date range on the docs, events have undefined behavior. Events lose their start or end time and, as a result, lose their height when rendered on the calendar.

Expected Behavior

No response

Actual Behavior

No response

react-big-calendar version

docs

React version

docs

Platform/Target and Browser Versions

docs

Validations

• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a react-big-calendar issue and not an implementation issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[cutterbl]

@bvergara87 Can you give me the exact steps you are using to recreate this behavior?

[davellx]

I don't know for @bvergara87 but here are my steps, in WEEK view :

1/ I load events from the server, and feed them to the component a first time (it works nicely)
2/ I listen to the onRangeChange event and when the range changes I reload events from the server - with the new dates obviously - and change the events array. ---> the events lose their 'start' date and are stuck to the upper side of the calendar in week view (css top:0%), except for the current day.
3/ I click on an event : everything goes back to normal, until I change ranges again.

I think there's a problem when events are changed dynamically. And I just updated version from 0.40.8 where it didn't happen.

EDIT : I just did some test : the bug started at version 1.2.0. version 1.1.0 seems to work well on this feature at least. :)

[valeriomycit]

I see the same problem in week and day views even with 2 simple hardcoded events, all my code is below (using fns localizer)

I only tried version 1.2.2 and 1.3.0

is enough to go back and forth with the week selector.
When I go from previous week to current, tomorrow event goes to the bottom
from next week back to current, it goes to the top
Same happens with events in other weeks
today event is always fine
(removing min and max do not change behavior)

`

const locales = {
'en-US': enUS,
}

const localizer = dateFnsLocalizer({
    format,
    parse,
    startOfWeek,
    getDay,
    locales,
})


const hardEvents = [
    {
     start: new Date("2022-07-12T10:00:00.000Z"),
     end: new Date("2022-07-12T14:00:00.000Z"),
     title: "Event today"
    },
    {
     start: new Date("2022-07-13T09:00:00.000Z"),
     end: new Date("2022-07-13T13:00:00.000Z"),
     title: "Event tomorrow"
    }
    
];
return (
    <Calendar
        localizer={localizer}
        events={hardEvents}
        style={{ height: 500 }}
        min={new Date(2020, 1, 0, 8, 0, 0)}
        max={new Date(2020, 1, 0, 18, 0, 0)}
    />
)`

[darkcattz]

Hello same problem here,
See example video and png on attachment.

It seems to be a problem updating the state on big-calendar.
Events lose their start time which changes the display for 1/4 second and then resets normally.

It's a recent problem. I didn't have this problem in v0.38.

bigcalendar-stateUpdateBug
bigcalendar-stateUpdateBug-video

[davellx]

The bug seems to be on the documentation too :
Just go to : https://jquense.github.io/react-big-calendar/examples/index.html?path=/story/examples--example-10
Click next (all events are at the bottom), click back (all events are at the top).

[darkcattz]

The bug seems to be on the documentation too : Just go to : https://jquense.github.io/react-big-calendar/examples/index.html?path=/story/examples--example-10 Click next (all events are at the bottom), click back (all events are at the top).

Yes, same bug in the demo.

[github-actions]

🎉 This issue has been resolved in version 1.3.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[davellx]

This fix introduced 2 new bugs (that were not present before):

• clicking on the anchor of an DnD event scrolls to top, maiking the dragging difficult
• changing range doesn't change the DnD date, creating events for weeks other than the current is impossible with mouse selection.

I'll open issues with that.

[darkcattz]

blocking Bug in last version :
DayColumn.getSnapshotBeforeUpdate(): A snapshot value (or null) must be returned. You have returned undefined. at DayColumn (http://localhost:8083/static/js/2.chunk.js:16616:34)

[darkcattz]

The update of the state is no longer done at all after the first load

[cutterbl]

@darkcattz @davellx Having to revert the changes around UNSAFE_, until such time as we can refactor this to a functional component with hooks and memoization.