Our pure JavaScript Scheduler component
Hello,
I'm trying to use custom event editor with VUE3, I've looked at VUE2 example and tried to re-create it in VUE3. I'm facing following problems:
- canceling creation of event with eventStore.remove() removes all events from a resource (see events_gone.gif)
- eventRecord.setEndDate reacts only after 4th call (see gifs.zip/set_end.gif) setStartDate works fine, also setEndDate(date, true) also reacts instantly
- adding new event to resource causes other resources to disappear (see end of gifs.zip/set_end.gif)
- calling setStartEndDate causes some type of infinite loop, the CPU usage goes to 100 and the browser tab becomes unresponsive (see gifs.zip/set_start_and_end.zip)
I've attached minimal VUE3 project that replicates the issues (archive.zip)
I am really hoping that I've made some stupid mistake that is causing all of the issues
-
Attachments
-
- archive.zip
- (24.62 KiB) Downloaded 13 times
-
- gifs.zip
- (4.89 MiB) Downloaded 15 times
I have narrowed down the cause of the issue. EventStore doesn't play nice with vue3's ref. Passing EventStore and/or EventModel as ref causes weird behavior. shallowRef seems to work fine during initial testing.
I've attached updated code example
-
Attachments
-
- archive.zip
- (29.09 KiB) Downloaded 14 times
-
- cancel_ref.gif (1 MiB) Viewed 212 times
The stores, eventStore, resourceStore or any other store are not supposed to be accessed by ref
. Vue usually wraps the passed object in JavaScript proxy which can cause unexpected problems. User ref
only to get the reference to a higher level component (scheduler, gantt, etc) and then access its stores as scheduler.eventStore
.
I haven't seen this in the official documentation, have I missed it? It would be helpful to have this in VUE guide.
Hey rytis.i,
We don't have explicitly that written in our docs regarding store access. But in our wrappers section https://bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/integration/vue/guide#wrappers we try to make it clear that there is a way to maintain the same approach as a plain JS Scheduler, the wrapper works just like a way to make the framework communicate with the Scheduler.
But I'll ping someone here to check if we can improve our documentation regarding that. Thanks for the note.