Our pure JavaScript Scheduler component


Post by rytis.i »

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

Post by rytis.i »

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
cancel_ref.gif (1 MiB) Viewed 210 times

Post by saki »

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.


Post by rytis.i »

I haven't seen this in the official documentation, have I missed it? It would be helpful to have this in VUE guide.


Post by marcio »

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.

Best regards,
Márcio


Post by rytis.i »

Thank you!


Post Reply