Our powerful JS Calendar component


Post by tdset »

We are using the TimeRange to display a "Now" line which shows the current time for a location in a different timezone.

Printscreen: https://www.dropbox.com/s/b1sv0rd9wnddxd6/Snipaste_2022-09-01_17-03-05.png?dl=0

I'm aware that Bryntum has this feature natively, but that doesn't work with different timezones (I'm referring to 'showCurrentTimeLine' property).

So we have this "Now" timeRange entry and I'm using a timer to update it every 1 minute. But every time we change the start date, it issues a call to the server. Which I would like to avoid.

I know I should create a new modelClass for the TimeRangeStore and set "startDate" as persist: false, but I cannot find a way to do this, can you help?

We are using the Calendar with the Scheduler (in the timeline mode).

In the past I've done something similar for the resourceStore, like below:

   crudManager : {
        eventStore : {
            modelClass : Screening,
            singleAssignment: true
        },
        resourceStore : {
            modelClass: Screen,
        },

where Screen is defined as:

class Screen extends ResourceModel {
    static get fields() {
        return [
            { name : 'name', type : 'string' },
            { name : 'eventColor', type : 'string' },
            { name : 'selected', type : 'number', defaultValue : 0, persist: false },
        ];
    }
}

Post by Animal »

It should be exactly the same but with timeRangeStore in your Project having a custom Model subclass.

Though really, if TimeRanges are imposed from the server, and not changeable by the client, that whole store should be excluded from the sync process. I'm not sure if that is possible out of the box. If not, it should be.


Post by tdset »

I did try with:

class CustomTimeRangeStore extends ResourceTimeRangeModel {
    static get fields() {
        return [
            { name : 'startDate', persist: false },
        ];
    }
}

and

crudManager : {
        timeRangeStore : {
            modelClass: CustomTimeRangeStore,
        },

but it errors out. Am I extending the right Model?


Post by mats »

No, you should extend TimeSpan model class.


Post by tdset »

Thank you Mats,

I've extended TimeSpan model and then within the Scheduler, I've set the project to use this new class.
However, changing startDate still triggers a sync with the server.

I've created a reproducible example (starting from your main calendar and scheduler example) - https://www.dropbox.com/s/cforaj8yyizt5aw/calendar-scheduler.zip?dl=0

There is a setInterval right at the end which triggers every 2 seconds. In my scenario it would trigger every 1 minute


Post by mats »

Look at the sync data, what is being synced? It might be you need to set 'endDate' as non-persistable too as it's recalculated when you set a new startDate.


Post by tdset »

only the startDate and id are synced.
I've set the endDate to not be persisted but it doesn't help.


Post by mats »

Strange, try defining it on the feature instead?

features : {
     timeRanges : {
           store : {
                modelClass : YourModelClass
           }
     }
}

Post Reply