Premium support for our pure JavaScript UI components


Post by til.schniese »

Hi there,

we are using the SchedulerPro in combination with Vue. The inline data feature is very convenient in this case, such that we can just pass in events, resources, and everything else as a prop. Apparently, I noticed there is a mismatch in the calendars, which could be improved. Basically, the problem is that we cannot update calendars via this inline interface, which is a bit annoying.

The current workflow when using calendars on events is like this (at least from what I saw):

  • 1. Pass in inline calendars data to create calendars (with id, intervals, ...)
  • 2. Retrieve the actual CalendarModel and assign it to the event
  • 3. To update calendar, use special addInterval or clearInterval functions
  • 4. This will trigger change event on eventStore (when event needs rescheduling after calendar update)

The problem with that flow is that I cannot stick with only the inline functionality, but still need to work with the CalendarModel after all. The improved flow would be like this:

  • 1. Pass in inline calendars data to create calendars (with id, intervals, ...)
  • 2. Only set the id of the calendar on the event
  • 3. Directly update the intervals of the inline calendar data (of the array passed into the component)
  • 4. This will already trigger change event on eventStore (when event needs rescheduling after calendar update)

I believe this could be a nice improvement. How hard would that be? It would already help me a lot if one could set the calendar of the event by just using the id and not the whole model. Could at least that be doable short term?

Thanks!


Post by marcio »

Hi til.scheniese,

Could you please share an example of how did you set up your calendar?? It should be possible to update that as you described.

Also, you can set the id of the calendar on the event

event.calendar = someId

or

event.setCalendar(someId)

where someId is an identifier of some calendar record existing in the calendars store

https://www.bryntum.com/docs/scheduler-pro/api/SchedulerPro/model/EventModel#function-setCalendar
https://www.bryntum.com/docs/scheduler-pro/api/SchedulerPro/model/EventModel#field-calendar

Best regards,
Márcio


Post by til.schniese »

Hey marcio,

you are right, setting the id already works I just checked. It's just not reflected in the docs.

Otherwise my setup is like the following:

I first initialize some calendars:

const calendars = [{id: 'some-id', intervals: [{startDate: 'some Date', endDate: 'some Date', isWorking: true}]}]

Those calendars are bound to the vue instance as a prop.
Then I assign the calendar to the events, that are also added via prop.

const events = [{..., calendar: calendars[0].id}]

Now, when I am trying to e.g. add another interval, I would only change the calendars array:

 [{id: 'some-id', intervals: [{startDate: 'some Date', endDate: 'some Date', isWorking: true},  someNewInterval]}]

What I expect is that the assigned event will be updated (assuming that the new interval causes rescheduling). But currently this is not happening.

But when I instead modify the calendarModel via addIntervals it is working as expected.

I hope you get the idea.


Post by marcio »

Hey,

I believe I get the idea, I tested it in our Vue 3 Inline data demo https://www.bryntum.com/examples/scheduler-pro/frameworks/vue-3/javascript/inline-data/dist/

I have

<bryntum-project-model
        ref="project"
        :events="events"
        :resources="resources"
        :assignments="assignments"
        :dependencies="dependencies"
        :calendars="calendars"
    />
    <bryntum-scheduler-pro
        v-bind="schedulerProConfig"
        :project="project"
    />

And the calendars just like you mentioned but as a ref

const calendars = ref([{id: 'calendar', intervals: [{startDate: new Date(), endDate: new Date(2022, 9, 1), isWorking: true}]}])

Then, updating the ref using calendars.value also updated in the project reference correctly, could you please try that approach?? I believe will work in the way you want. (Check also the demo code for reference).

Best regards,
Márcio


Post by til.schniese »

Thanks for your answer. The calendars are indeed updated. Did you also check that the rescheduling works, when the new interval causes one of the events to be rescheduled? We are using the change listener on the eventStore to sync the events. But in this case, there is no change event triggered. Would be great if you could check this as well.


Post by til.schniese »

I forgot to add that I am still running on Vue 2.7, could this be the problem?


Post by marcio »

Hey til.schniese,

Could you set up a sample project with your configuration (you can zip your project without node_modules with a sample of data)?? It'll be easier to help you with that and check all the questions that you made.

Vue version, at first sight, wouldn't be a problem.

Best regards,
Márcio


Post by til.schniese »

Alright, not a full project, but I added a Vue file containing the reduced test case. You should be able to plug it into your local Vue project.

I added two different buttons you can click. addNonWorkingInline adds a new non working time interval via changing the inline calendar data. addNonWorkingApi changes the calendar via addIntervals. Both functions will add the same interval. This interval should cause the event to reschedule. So, it is expected that the event is updated UI-wise as well as change is triggered on the eventStore.

Unfortunately, this only works for addNonWorkingApi, but not for addNonWorkingInline.

I hope that helps to understand the issue.

Attachments
ExampleCase.zip
(1.45 KiB) Downloaded 44 times

Post by marcio »

Hey til.schniese,

The behavior that you mentioned is not available right now, but I opened a ticket to add it https://github.com/bryntum/support/issues/5011

For now, you'll need to keep using the setIntervals, addInterval and clearInterval to trigger all the listeners and calculations correctly.

Best regards,
Márcio


Post by til.schniese »

Alright, thanks!


Post Reply