Our powerful JS Calendar component


Post by niranjan »

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?


Post by tasnim »

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


Post by niranjan »

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


Post by saki »

Hello niranjan,

we need to see your source to effectively help you. Prepare please a minimal showcase that would show your issue and that we can run/edit/debug and post it here (w/o node_modules folder).


Post by niranjan »

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 24 times

Post by saki »

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")
    }

Post by niranjan »

Awesome.
It worked.
Thanks a lot.


Post Reply