Topic: Calendar Plugin event prop not reactive
NoahConn pro asked 1 year ago
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
Bartosz Cylwik staff answered 1 year ago
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 priority commented 11 months 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 11 months 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
- ForumUser: 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