How to set timezone in scheduler.js

[korneld]

Hi Alex,

In your demo, when you change the time zone the scheduler date ranges also change.

In our demo, we would like to change time zone and date range in the same time, so the scheduler still displays the full day (00:00 - 23:59) but in different time zone.

Sorry, maybe I started the post wrong asking if you support time zone change at runtime but I always want to ensure that you support what I'm asking and make sure I'm not expecting too much.

I also want to ensure that we understand each other and that is way I usually prepare demo and write what I pass and what I expect.

Best regards,
Kornel

[joakim.l]

I can give some details in this matter.

If you change timeZone on a running scheduler, the startDate and endDate will be converted to the new timeZone.
If you thereafter (even in the next executed line of code), change the startDate and/or endDate of the Scheduler, those dates will not be converted.

There is currently no support for recognizing date strings with time zone information, these will simply be parsed into a JS date and treated as in the local system time zone.

However, I believe that it should be supported, so here is a ticket for it: https://github.com/bryntum/support/issues/8516

What you could do as a workaround, is to remove the time zone information from the dates:

const sofiaTimeZoneIana = 'Europe/Sofia'; // UTC+2
const sofiaStartDateTime = '2024-02-06T00:00:00.000';
const sofiaEndDateTime = '2024-02-06T23:59:59.999';

Or if that isn't possible, convert the dates with the help of TimeZoneHelper:

const sofiaTimeZoneIana = 'Europe/Sofia'; // UTC+2
const sofiaStartDateTime = TimeZoneHelper.toTimeZone(new Date('2024-02-06T00:00:00.000+02:00'), 'Europe/Sofia');
const sofiaEndDateTime = TimeZoneHelper.toTimeZone(new Date('2024-02-06T23:59:59.999+02:00'), 'Europe/Sofia');

[korneld]

Hi Joakim,

Thank you for the update.

I already tried to convert the dates using TimeZoneHelper.toTimeZone method and still, the date range I can see on the scheduler is different that I expect.

Please see attached demo.

1. First, click 'Load sample data from server' to load/see the example event
2. Then, click 'Update time zone' to change time zone from UTC to UTC+2

I'm expecting that the scheduler will display time range

00:00 - 23:59

but

it displays 02:00 - 01:59.

I think I can not update time zone, start date and end date in one go.

We are using 'bryntum-scheduler-pro' angular component and we interact with it passing start date, end date, time zone inputs. I also tried to change the order of inputs and still it does not help.

[joakim.l]

Hi!

Thank you for your patience. I have reproduced your problem and have a few questions so that we can improve how this works. But first, a workaround to fix the issue:

public updateTimeZone() {
    this.timeZoneIana = sofiaTimeZoneIana;
    this.eventStore.project.commitAsync().then(() => {
      this.startDate = TimeZoneHelper.toTimeZone(new Date(sofiaStartDateTime), sofiaTimeZoneIana);
      this.endDate = TimeZoneHelper.toTimeZone(new Date(sofiaEndDateTime), sofiaTimeZoneIana);
    });
  }

The questions then:

1. When changing timeZone, do you want the startDate and endDate to remain at that hour/minute? For example, if startDate was 2024-02-21T00:00:00 before the timeZone conversion, it should be 2024-02-21T00:00:00 after it also?
2. If yes, would it make sense to have this behaviour configurable? Either you'd like the startDate and endDate gets converted on timeZone change or you want it to leave them uncanged.

Also, here is a ticket to fix that it should be possible to change the startDate and endDate immediately after changing timeZone: https://github.com/bryntum/support/issues/8650

[korneld]

Hi,

Thanks for sharing the work around. I could've come up with this.

1. Yes. Start date is 2024-02-21T00:00:00, the user changes time zone from X to Y and we still want to display 2024-02-21T00:00:00.
2. Our opinion is that you should always convert start and end date, or you should never convert start and date time or you can make it configurable and let the user decide. What we are experiencing is that in our project we need to maintain code/if statements that:

a. does not convert start date for the first time
b. do convert start date for the second and later updates
c. when time zone is changing, I need to maintain another logic for converting/not converting date range

I understand that this is all about js date not supporting time zone. Basically in our code, we maintain two dates - the 'real' start date 2024-02-06T00:00:00.000+02:00 that the server relies on and the fake one 2024-02-06T00:00:00.000, pretending that this is 2024-02-06T00:00:00.000+02:00 (for display purposes only) and I believe you have the same complexity.

Best regards,
Kornel

[joakim.l]

Thank's for your feedback. You're completely right, there is no simple way trying to implement time zones in JS.