v1.13.0
Features
In regions with daylight saving time (DST), such as New York, the schedule is modified to always appear in the same location regardless of summer time/standard time.
I received a timezoneOffset
value as an option to set the secondary time zone in the weekly/daily view. If the offset value is fixed and used, in an area with two offsets (e.g. New York), the time of the previously created schedule is displayed incorrectly according to the timezone.
To improve this, a new timezone
option is added. You set the list of time zones in the zones
property. timezoneName
is essential as timezone information (e.g. 'Asia / Seoul', 'America / New_York') is required to calculate the offset. By default, the input timezoneName value. Internally, the offset can be calculated using the JavaScript standard specification Intl.DateTimeFormat
. Alternatively, you can use the offsetCalculator
property to pass the timezone name and time(ms) as parameters and get the exact offset of that time in that time zone.
Existing (1.12.14 and below)
timezones
options will be deprecated.
AS-IS
const cal = new Calendar(el, {
...
timezones: [
{
tooltip: 'Seoul',
displayLabel: 'GMT+09:00',
timezoneOffset: 540
},
{
tooltip: 'New York',
displayLabel: 'GMT-05:00',
timezoneOffset: -300
},
]
});
TO-BE
const cal = new Calendar(el, {
timezone: {
zones: [
{
timezoneName: 'Asia/Seoul',
tooltip: 'Seoul',
displayLabel: 'GMT+09:00'
},
{
timezoneName: 'America/New_York',
tooltip: 'New York',
displayLabel: 'GMT-05:00'
},
]
}
});
If you define the offsetCalculator
property, the offset calculation is done with this function.
The offsetCalculator
option allows you to set up a function that returns the timezone offset for that time using date libraries like js-joda and moment-timezone.
The offsetCalculator
option is useful when your browser does not support Intl.DateTimeFormat
and formatToPart
, or you want to use the date library you are familiar with.
const cal = new Calendar(el, {
timezone: {
zones: [
...
],
offsetCalculator: function(timezone, timestamp){
// matches 'getTimezoneOffset()' of Date API
// e.g. +09:00 => -540, -04:00 => 240
return moment.tz.zone(timezone).utcOffset(timestamp);
},
}
});
If you are using a custom time zone, you need to add polyfills if all of the following are true.
- Browser does not support
Intl.DateTimeFormat
andformatToPart
. - The
offsetCalculator
option is not defined. - Your service supports Internet Explorer.
Fix
- 6d4d635 Feat: : when you do not set a custom timezone, the schedule will always be displayed the same. (#423, #671)
Enhancement
- 1318406 Refactor: update example code
Documentation
- 4fef784 Docs: add timezone option