Premium support for our pure JavaScript UI components


Post by liuyan@honeycombtech »

Hi,
How to partial add new events?

addEvents() {
      let newEvents = [
        {
          resourceId: 2,
          name: "Add event",
          startDate: "2022-03-24T03:00",
          endDate: "2022-03-24T05:00",
          iconCls: "b-fa",
          eventColor: "orange",
        },
        {
          resourceId: 3,
          name: "Add event",
          startDate: "2022-03-25T03:00",
          endDate: "2022-03-25T05:00",
          iconCls: "b-fa",
          eventColor: "blue",
        },
      ];
      this.events.push(...newEvents); // Why does it not work?
      console.log(this.events);
    },
demo.zip
(156.35 KiB) Downloaded 43 times

Post by mats »


Post by liuyan@honeycombtech »

Hi,

I tried, but this method doesn't work in vue-project
In vue, this.events should be an observed object.
Please check the demo first.

You can click 'addEvents' button.

We have tried to read your doc before
But projects are often more complex than examples, and our company's projects are all Vue framed.

Now we try to find a way to update resources and events in part or overall in vue. And do CRUD.

Sometimes update the whole, but update the parital is not very good.

In the past few months, we still don't know which is the right way to do. We always have problems with our own groping

Now we write a demo according to our own needs and hope to get help

Thank you very much.


Post by alex.l »

In vue, this.events should be an observed object.

In Vue it will be catched only if you replaced all array and not just modify it. This is how binding works.

When you work with frameworks data binding, you need to enable https://bryntum.com/docs/scheduler-pro/api/SchedulerPro/data/EventStore#config-syncDataOnLoad to prevent full data replacing in store, but only apply difference.

All the best,
Alex


Post by liuyan@honeycombtech »

In Vue it will be catched only if you replaced all array and not just modify it.

It can modify it. https://vuejs.org/guide/essentials/list.html#array-change-detection
I wrote a vue demo please check.

Attachments
vue.html.zip
(1.1 KiB) Downloaded 41 times

Post by liuyan@honeycombtech »

Hi,
Now we use BryntumProjectModel in vue, how to set the value for syncDataOnLoad.

It should not be a good idea to replace all arrays when we modify them each time in vue.

What do you think?


Post by saki »

The following should do the trick. eventStore provides configuration for the event store when it is created and events give it the data.

<BryntumProjectModel
    events = {events}
    eventStore = {{ syncDataOnLoad:false }}
/>

Post by liuyan@honeycombtech »

Hi saki,
It still doesn't work in vue.

demo.zip
(149.38 KiB) Downloaded 40 times

Thank you in advance.


Post by liuyan@honeycombtech »

Hi,
It works now. I didn't notice the event date being out of the calendar range.
Thank you, everyone.


Post by alex.l »

We've opened a ticket to fix problem with partial data updates https://github.com/bryntum/support/issues/4593

All the best,
Alex


Post Reply