Our pure JavaScript Scheduler component


Post by mariusssl »

Hello,

we´re wondering how we should ingest the store with resources and events "the right way". We digged around the documentation and it´s also working, but we´re not shure, if we´re using it the way its intended. Maybe a point to the documentation is maybe enough, but we cannot find the "right" information.

What we´re doing: We´re having an application that uses graphql and polling. We´re polling the server every 10 seconds for an update for the scheduler (resources and events). We´re receiving the fulll set of data, when request completes (no delta) - so each and every time we have to "overwrite" the content of the store (resources and events) with "new/fresh" data. The data is, most of the time, the same, but changes during the day (another users changes something). At the moment we´re doing this. Even, if something changes, e.g. an update to an event happens, we´re refetching all the data for the given timespan.

What we´re doing something like this at the moment:

subscribeToData( result => {
this.resourceStore.add(this.vehicleService.convertVehiclestoResources(result.data.vehicles));
this.eventStore.add(this.tourService.convertToursToEvents(result.data.tours));
})

(Please ignore the convert method. )

Is this right? We´re seeing many other methods for ingesting data into the store. The documentation (https://www.bryntum.com/docs/scheduler/#Core/guides/data/storebasics.md) only shows how to start a store with data or use a remote - which we cannot use, since we´re having an graphql endpoint.

Thanks
Marius


Post by mats »

You should see https://bryntum.com/docs/scheduler/#Core/data/mixin/StoreSync#config-syncDataOnLoad

when enabling this flag, new dataset will sync the "delta" between old / new so ensure best possible performance.


Post by mariusssl »

Hi Mats,

thanks for your quick reply. So the overall way by simply using the "add" method is right, but we should activate the delta caluclations (makes completely sense).

Best regards
Marius


Post by mariusssl »

One additional question. I´m trying around how to "manually" create a store and do not reuse the one, that´s automatically generated. What we´re doing now:

Inside the template:

      <bryntum-scheduler
        #scheduler
        [barMargin]  = "5"
        [columns]    = "schedulerColumns"
        [mode]       = "'horizontal'"
        [rowHeight]  = "80"
        [viewPreset] = "schedulerViewPreset"
        [eventStyle] = "'plain'"
        [features] = "schedulerFeatures"
        [eventBodyTemplate] = "eventBodyTemplate"
        [eventRenderer] = "eventRenderer"
        (onBeforeEventDrag)= "onBeforeEventDrag($event)"
        (onEventDragAbort)="onEventDragAbort()"
        (onEventDrop)="onEventDrop($event)"
      ></bryntum-scheduler>

Somewhere in the typescrit afterViewInit:

this.eventStore = this.scheduler.eventStore;

so that we can use the reference to add data.

Know im trying to setup the store with a custom config an manually plug it in. I tried - already on the contstructor level:

this.eventStore = new Store(this.storeConfig);

Than in the template:
(there´s one more [eventStore] = eventStore line than in the code above)

      <bryntum-scheduler
        #scheduler
        [barMargin]  = "5"
        [columns]    = "schedulerColumns"
        [mode]       = "'horizontal'"
        [rowHeight]  = "80"
        [viewPreset] = "schedulerViewPreset"
        [eventStyle] = "'plain'"
        [features] = "schedulerFeatures"
        [eventStore] = eventStore
        [eventBodyTemplate] = "eventBodyTemplate"
        [eventRenderer] = "eventRenderer"
        (onBeforeEventDrag)= "onBeforeEventDrag($event)"
        (onEventDragAbort)="onEventDragAbort()"
        (onEventDrop)="onEventDrop($event)"
      ></bryntum-scheduler>

But without luck. I can see, that the angular component has an attribute "eventStore: EventStore | object | Partial<EventStoreConfig>;" but this will end in an:

core.js:6210 ERROR TypeError: record.setProject is not a function
at ClassDefEx.fn (scheduler.lite.umd.js:101552)
at ClassDefEx.traverse (scheduler.lite.umd.js:19718)
at ProjectModel.joinStoreRecords (scheduler.lite.umd.js:101557)
at ProjectModel.set (scheduler.lite.umd.js:101623)
at ProjectModel.set (scheduler.lite.umd.js:4005)
at ProjectModel.setConfig (scheduler.lite.umd.js:2670)
at ProjectModel.configure (scheduler.lite.umd.js:2591)
at ProjectModel.construct (scheduler.lite.umd.js:2216)
at ProjectModel.construct (scheduler.lite.umd.js:7249)
at ProjectModel.construct (scheduler.lite.umd.js:52693)

Thanks
Marius


Post by mats »

So the overall way by simply using the "add" method is right, but we should activate the delta calculations (makes completely sense).

Please see the docs, and use 'data' setter like so:

store.data = [ { id : 1, name : 'Saitama' } ];

const first = store.first;

store.data = [ { id : 1, name : 'One-Punch man' } ];

store.first !== first;

And please start a new thread for your 2nd question to make it easier to manage forums.


Post Reply