[REACT] Events Rendering Intermittently in Calendar After Page Change

[rahul.agrawal@knack]

Hi Bryntum team,

I'm facing an issue where events in the calendar are rendering intermittently. Here's what’s happening:

I'm making a network call to fetch event records whenever the page changes (e.g., when navigating between weeks/months).

However, the events are not consistently rendered on the calendar.

Sometimes, I have to navigate to a different page (e.g., go forward and then back) for the events to appear correctly.

When the issue occurs, there are no errors in the console, and the network call does return the correct data.

It seems like the data is being loaded, but the calendar view does not always refresh or render the events properly on first load.

I’ve attached a screen recording to demonstrate the issue in action.

Let me know if there's something I might be missing or if there's a recommended approach to ensure reliable rendering when updating event data dynamically.

intermittentRendering.mp4

(2.85 MiB) Downloaded 18 times

Thanks in advance for your help!

[marcio]

Hey rahul.agrawal@knack,

Thanks for reaching out.

You can try using the refresh function to manually refresh the calendar view after the data is fetched. This can ensure that the calendar updates its display with the new event data.

Make sure to call this function after your network call completes and the data is set in the calendar's event store.

If the issue persists, please provide more details or code snippets showing how you are fetching and updating the event data.

[rahul.agrawal@knack]

Refresh is not working
attaching a video to show the implementation

refreshNotWorking.mp4

(4.11 MiB) Downloaded 13 times

[marcio]

Hey,

Could you please provide a runnable test case? By only looking at the video, it's difficult to pinpoint what could be causing the issue.

Are you using an inline data approach? Which version are you using?

[rahul.agrawal@knack]

I am using the events prop of BryntumCalendar to pass events to render

Also, you have a prop called listeners, which then contains a function dateRangeChange

I am trying to fetch the start and end date inside this function

And then I am changing my params to fetch new data based on the start date and end date received

Now the problem is,
bryntum fails to render events sometimes

So my guess is there is a rendering issue,
Possibly, Bryntum Calendar is not rendering correctly all the time when the event is changed

Can you elaborate on what kind of test case you are referring to?
Do you want me to write a test case exclusively to explain this by decoupling my implementation?

Also, I am not sure if a test case can catch such race conditions
Because this is intermittent, it sometimes renders and sometimes fails

[khattakdev]

Hey,

To properly look into the issue, we’ll need a minimal test case, a simple example where the problem can be reproduced. This helps us inspect the code directly and figure out what's going wrong.

The general explanation and videos are useful for background, but they don’t give us enough to debug the issue effectively.