I am using the Bryntum Calendar wrapper.
I am using the data that I fetch by making an API call and store in on the calendar to show the events.
How to refresh the calendar if I receive on event from an external source to show on the calendar by auto refreshing the component?
Support Forum
Hi,
You could use this method to refresh the calendar https://bryntum.com/products/calendar/docs/api/Calendar/view/Calendar#function-refresh
Good Luck ,
Tasnim
Nothing changes on the calendar.
I am using <BryntumCalendar /> wrapper.
Do you have an example on how I should use the refresh() on the calendar?
I am using the class component in my application.
this.calendar.current.props.onRefresh().then(
console.log("Refreshed!!!")
)
I used this.
I get the log "Refreshed!!!"
But the calendar is not showing the event data.
I use state variable to bind the data to the calendar.
I see the new data in the state variable but the calendar does not show it.
Thanks
Hi Saki,
Please find the attached working example of the refresh calendar project.
I am loading the state with the calendar data and I am trying to refresh the state with the new data after 5 seconds and I intend to see the data refreshed on the calendar.
Let me know if you need clarification on the attached sample.
Thank you very much for your help.
- Attachments
-
- simple-calendar.zip
- (41.76 KiB) Downloaded 27 times
Well, the issue you are facing is not a Bryntum issue but how React state is supposed to work. The following chunk resolves it:
onRefresh = async => {
console.log("onRefresh")
let newData = {
"id": 4,
"startDate": "2023-03-23T12:00:00",
"endDate": "2023-03-23T14:00:00",
"name": "Afternoon Work",
"resourceId": "hotel",
"allDay": false
}
// create a shallow copy of the array of events
const events = [...this.state.events];
// add new new event at the end of the array
events.push(newData)
// set new events array in state
this.setState((state) => {
return {...state, events}
});
console.log("After refresh")
}