Topic: Calendar Plugin event prop not reactive
Expected behavior I have to load data from my database asynchronously then load it into the event ref. The calendar should update when the ref is populated with new events.
Actual behavior I have to load data from my database asynchronously and load it into the event ref. The calendar doesn't update when the ref is populated.
Resources (screenshots, code snippets etc.) https://mdbootstrap.com/snippets/standard/noah_connolly/5349330
Hi! Use addEvents or removeEvents methods when you want to update the event list. For example:
basicCalendar.value.addEvents(newEventList);
where newEventList is an array with new events.
You can find those methods in the API tab of our documentation: https://mdbootstrap.com/docs/vue/plugins/calendar/#docsTabsAPI
Best Regards!
rtg pro premium priority commented a year ago
I was struggling with the same issue. For me in order to implement your suggestion required a watcher of a computed property and then to remove all events before adding back the new event list.
watch(myEventList, (newEventList, oldEventList) => { myCalendar.value.removeEvents(oldEventList); myCalendar.value.addEvents(newEventList); })
The performance on this isn't great. There is a noticeable delay when updating the calendar.1. Do you have suggestions of a different implementation to improve performance.2. Can you not make the MDBCalendar component watch for changes in the events prop?
Bartosz Cylwik staff commented a year ago
Hi, for now we do not plan to change the functionality around the events prop but we will take a closer look at the addEvents method to check whether we should update it or add some new parameters to it.
Best Regards!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Vue
- MDB Version: MDB5 4.0.0
- Device: Macbook Pro 2021
- Browser: Chrome
- OS: MacOS Ventura 13.3.1
- Provided sample code: No
- Provided link: Yes