How to set timezone in scheduler.js

[alex.l]

Hi,

No updates yet, unfortunately. We understand how important for you to have it fixed, we've marked this ticket as a high-prio, so things will go faster from now.

Is this ticket going to be progressed in the coming month ?

It definitely should be started in next week(s), but we can't predict when it will be finished. We will try our best to fix it fast!
Thank you for your patience!

[gerts]

Hi,

I'm also being impacted by this issue and would like to see it resolved.

Regards,
Gerts

[alex.l]

I commented the ticket, thanks for letting us know!

[korneld]

Thank you Joakim,

Thank you for the explanation !

I just didn't know that I should rather be setting the data property of the store instead adding/inserting records ! Really, appreciate it !

I would like to ask more about the following scenario:

We have implemented real time data communication with the server. So when the user entered the app, we load all events, then every X seconds, server is sending us record updates e.g.: event with id X changes start time to Y or event with id X changes resource id to Y.

With this is mind, I would like to avoid setting all data every time record changes. I would prefer to implement mechanism to:

1. set all events in store when the user entered app for the first time (this.eventStore.data = data.events;) then
2. insert new event record to the store when server says so (e.g.: another user creates new event)
3. update event record when server says so (another user updates the record)

do you have any recommendation, can you think of other store methods that perform time conversion ? or in that case I should rather manually perform time conversion (e.g.: use TimeZoneHelper.toTimeZone) and use add/insert methods ?

Best regards,
Kornel

Hi Joakim and Alex,

In https://github.com/bryntum/support/issues/7012, I can read:

"Also, we need to come up with a solution to add and update record that is not time zone converted to a store that is time zone converted."

I have tried v5.5.3 and I still need to manually convert event start date and event end date while adding record into store, is that correct ?

[joakim.l]

Hi!

If you want to apply time zone conversion to added or inserted records, you would need to specify a time zone for those records.

Or specify null if they are in the local system time zone.

{
   timeZone : null
}

[korneld]

Hi,

So my understanding is (just double checking)

When setting timeZone, I'm telling the scheduler - "This record is already converted to the given time zone - do not perform conversion".

When setting to null, I'm telling the scheduler - "This record needs time conversion, please perform time conversion".

The problem I can see is that in my typescript project I can not set null.
Looking at SchedulerEventModel constructor:

constructor(config?: Partial<SchedulerEventModelConfig>);

It allows me to set: string | number | undefined

Setting undefined value does not convert my event to the project configured time zone.

I tried to do some magic and cast the object I'm creating to any and set timeZone to null but it does not work.

Is there any chance you could look into attached demo and show us how to display event in the demo in the configured project timeZone.

In the demo app the fallowing event is created:

startDate: 2023-05-26T12:00:00.000Z
endDate: 2023-05-26T14:00:00.000Z
timeZone: Europe/Sofia (UTC+3)

So I'm expecting that the event will be displayed from 15:00 to 17:00.

[joakim.l]

Hi

You're right. The typing for the timeZone field will be fixed to allow null in the next release.
Will do a quick look at your code to see if I can find a workaround. I'll let you know in a bit.

[joakim.l]

Hi again.

Here is a ticket to track the null issue: https://github.com/bryntum/bryntum-suite/pull/7878

And the workaround:

Setting timeZone to null is a way to tell the time zone converted Scheduler that this newly added record should be converted from the local system time zone into the configured time zone. Per default, the Store's add and insert functions treats the record's dates as in the currently configured time zone. Mostly because if new records are added with the UI, those records should not be time zone converted.

So, a short answer: Setting the timeZone field to your local system time zone should work as well as setting it to null:

events.push({
      id: i,
      manuallyScheduled: true,
      resourceId,
      startDate: eventStartDateTime,
      endDate: eventEndDateTime,
      name: `${eventStartDateTime} - ${eventEndDateTime} (TZ: ${this.timeZoneIana})`,
      timeZone: new Intl.DateTimeFormat().resolvedOptions().timeZone
    });

[korneld]

Perfect ! Thank you for your help.

The demo, I uploaded here, works as expected.

Best Regards,
KD

[korneld]

Hi all,

Thanks for supporting us !

I would like to ask if applyChangeset method on the EventStore is designed to accept event start and end date updates and that the timezone conversion is applied on the record (to the project timezone configuration).

I observe the followings (see the attached angular demo):

We have the fallowing event in the system:

const eventStartDateTime = '2023-12-01T12:00:00.000Z';
const eventEndDateTime = '2023-12-01T15:00:00.000Z';

The project timezone configuration is UTC
The user computer is in UTC+1

We load the data from the server and update EventStore.

• event is displayed correctly. It is start date is 12:00 end date is 15:00

The update from the server is comming for the second time changing event start and end date to:

const eventStartDateTime = '2023-12-01T13:00:00.000Z';
const eventEndDateTime = '2023-12-01T16:00:00.000Z';

We update the event using applyChanges store method.

• The event is displayed correctly. It is start date is 13:00 and end date is 16:00

Unfortunately if server sends us third update:

const eventStartDateTime = '2023-12-01T14:00:00.000Z';
const eventEndDateTime = '2023-12-01T17:00:00.000Z';

• The event is displayed incorrectly. Sounds like timezone conversion is lost. Event is now displayed between 15:00 and 18:00 (UTC+1 - the computer timezone)

I would expect that the event is still displayed in UTC, which is 14:00 - 17:00.

It is interesting that the second update works but the third one not.

I redesigned our store update logic and started removing event and then adding them again to the store. Events are displayed just fine but unfortunately, it causes us more problems (e.g. we lost the reference to the selected event. which we rely on etc.)

We need to find the way to update the event (we don't want to remove and add them again.)

Best regards,
KD