Skip to content

v1.13.0

Compare
Choose a tag to compare
@jungeun-cho jungeun-cho released this 23 Dec 03:08

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 and formatToPart.
  • 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