Timezone in EJ2 TypeScript Schedule control

31 Jan 202624 minutes to read

By default, the Scheduler uses the client system’s time zone. To display or process appointments in a specific time zone, use the timezone property. Individual appointments can also carry their own time zone information by using startTimezone and endTimezone fields in the event data.

Note: The timezone property affects appointment processing and the current-time indicator only.

Understanding date behavior in JavaScript

JavaScript’s new Date() returns a Date object that includes local time and the client’s time zone offset. For example:
Wed Dec 12 2018 05:23:27 GMT+0530 (India Standard Time) — indicating local time 5:23 AM in IST (UTC+05:30).

Scheduler with no explicit timezone

When no time zone is set on the Scheduler, appointments render according to the client browser’s time zone. For example, providing start/end times with new Date() will present those times in the viewer’s local time zone.

import { Schedule, Day, Week, TimelineViews, Month, Agenda } from '@syncfusion/ej2-schedule';

let data: object [] = [{
    Subject: 'Paris',
    StartTime: new Date(2018, 1, 15, 9, 0),
    EndTime: new Date(2018, 1, 15, 10, 0)
}];

Schedule.Inject(Day, Week, TimelineViews, Month, Agenda);

let scheduleObj: Schedule = new Schedule({
    height: '550px',
    selectedDate: new Date(2018, 1, 15),
    views: ['Day', 'Week', 'TimelineWeek', 'Month', 'Agenda'],
    eventSettings: {
        dataSource: data
    }
});
scheduleObj.appendTo('#Schedule');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Schedule Typescript Control</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Schedule Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-schedule/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="Schedule"></div>
    </div>
</body>

</html>

Scheduler set to a specific timezone

Setting the Scheduler’s timezone property forces all appointments to display according to that time zone regardless of the client’s local setting. The example below demonstrates appointments displayed in Eastern Time (UTC−05:00).

import { Schedule, Day, Week, Month } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';

Schedule.Inject(Day, Week, Month);

let scheduleObj: Schedule = new Schedule({
    width: '100%',
    height: '550px',
    views: ['Day', 'Week', 'Month'],
    selectedDate: new Date(2018, 1, 17),
    timezone: 'America/New_York',
    eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Schedule Typescript Control</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Schedule Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-schedule/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>

<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="Schedule"></div>
    </div>
</body>

</html>
export let scheduleData: Object[] = [{
    Id: 1,
    Subject: "Explosion of Betelgeuse Star",
    StartTime: "2018-02-11T14:00:00.000Z",
    EndTime: "2018-02-11T15:30:00.000Z",
    CategoryColor: "#1aaa55"
}, {
    Id: 2,
    Subject: "Thule Air Crash Report",
    StartTime: "2018-02-12T16:30:00.000Z",
    EndTime: "2018-02-12T18:30:00.000Z",
    CategoryColor: "#357cd2"
}, {
    Id: 3,
    Subject: "Blue Moon Eclipse",
    StartTime: "2018-02-13T14:00:00.000Z",
    EndTime: "2018-02-13T15:30:00.000Z",
    CategoryColor: "#7fa900"
}, {
    Id: 4,
    Subject: "Meteor Showers in 2018",
    StartTime: "2018-02-14T17:30:00.000Z",
    EndTime: "2018-02-14T19:00:00.000Z",
    CategoryColor: "#ea7a57"
}, {
    Id: 5,
    Subject: "Milky Way as Melting pot",
    StartTime: "2018-02-15T16:30:00.000Z",
    EndTime: "2018-02-15T018:30:00.000Z",
    CategoryColor: "#00bdae"
}, {
    Id: 6,
    Subject: "Mysteries of Bermuda Triangle",
    StartTime: "2018-02-15T14:00:00.000Z",
    EndTime: "2018-02-15T15:30:00.000Z",
    CategoryColor: "#f57f17"
}, {
    Id: 7,
    Subject: "Glaciers and Snowflakes",
    StartTime: "2018-02-16T15:30:00.000Z",
    EndTime: "2018-02-16T017:00:00.000Z",
    CategoryColor: "#1aaa55"
}, {
    Id: 8,
    Subject: "Life on Mars",
    StartTime: "2018-02-17T13:30:00.000Z",
    EndTime: "2018-02-17T14:30:00.000Z",
    CategoryColor: "#357cd2"
}, {
    Id: 9,
    Subject: "Alien Civilization",
    StartTime: "2018-02-19T15:30:00.000Z",
    EndTime: "2018-02-19T17:30:00.000Z",
    CategoryColor: "#7fa900"
}, {
    Id: 10,
    Subject: "Wildlife Galleries",
    StartTime: "2018-02-21T15:30:00.000Z",
    EndTime: "2018-02-21T17:30:00.000Z",
    CategoryColor: "#ea7a57"
}, {
    Id: 11,
    Subject: "Best Photography 2018",
    StartTime: "2018-02-22T14:00:00.000Z",
    EndTime: "2018-02-22T15:30:00.000Z",
    CategoryColor: "#00bdae"
}, {
    Id: 12,
    Subject: "Smarter Puppies",
    StartTime: "2018-02-09T14:30:00.000Z",
    EndTime: "2018-02-09T16:00:00.000Z",
    CategoryColor: "#f57f17"
}, {
    Id: 13,
    Subject: "Myths of Andromeda Galaxy",
    StartTime: "2018-02-07T15:00:00.000Z",
    EndTime: "2018-02-07T17:00:00.000Z",
    CategoryColor: "#1aaa55"
}, {
    Id: 14,
    Subject: "Aliens vs Humans",
    StartTime: "2018-02-05T14:30:00.000Z",
    EndTime: "2018-02-05T16:00:00.000Z",
    CategoryColor: "#357cd2"
}, {
    Id: 15,
    Subject: "Facts of Humming Birds",
    StartTime: "2018-02-20T14:00:00.000Z",
    EndTime: "2018-02-20T15:30:00.000Z",
    CategoryColor: "#7fa900"
}, {
    Id: 16,
    Subject: "Sky Gazers",
    StartTime: "2018-02-23T15:30:00.000Z",
    EndTime: "2018-02-23T17:30:00.000Z",
    CategoryColor: "#ea7a57"
}, {
    Id: 17,
    Subject: "The Cycle of Seasons",
    StartTime: "2018-02-12T00:00:00.000Z",
    EndTime: "2018-02-12T02:00:00.000Z",
    CategoryColor: "#00bdae"
}, {
    Id: 18,
    Subject: "Space Galaxies and Planets",
    StartTime: "2018-02-12T17:30:00.000Z",
    EndTime: "2018-02-12T18:00:00.000Z",
    CategoryColor: "#f57f17"
}, {
    Id: 19,
    Subject: "Lifecycle of Bumblebee",
    StartTime: "2018-02-15T00:30:00.000Z",
    EndTime: "2018-02-15T02:00:00.000Z",
    CategoryColor: "#7fa900"
}, {
    Id: 20,
    Subject: "Alien Civilization",
    StartTime: "2018-02-15T18:30:00.000Z",
    EndTime: "2018-02-15T19:30:00.000Z",
    CategoryColor: "#ea7a57"
}, {
    Id: 21,
    Subject: "Alien Civilization",
    StartTime: "2018-02-11T18:30:00.000Z",
    EndTime: "2018-02-11T20:30:00.000Z",
    CategoryColor: "#ea7a57"
}, {
    Id: 22,
    Subject: "The Cycle of Seasons",
    StartTime: "2018-02-13T19:00:00.000Z",
    EndTime: "2018-02-13T20:30:00.000Z",
    CategoryColor: "#00bdae"
}, {
    Id: 23,
    Subject: "Sky Gazers",
    StartTime: "2018-02-16T19:00:00.000Z",
    EndTime: "2018-02-16T20:30:00.000Z",
    CategoryColor: "#ea7a57"
}, {
    Id: 24,
    Subject: "Facts of Humming Birds",
    StartTime: "2018-02-17T17:00:00.000Z",
    EndTime: "2018-02-17T19:00:00.000Z",
    CategoryColor: "#7fa900"
}];

Display events at the same time everywhere (UTC)

If events are stored in UTC and the goal is to present the same wall-clock time to all users, set the Scheduler’s timezone to UTC. Doing so ensures event times match the stored database times for every user, regardless of their local time zone.

import { Schedule, Day, Week, Month, Timezone } from '@syncfusion/ej2-schedule';
import { fifaEventsData } from './datasource.ts';
import { extend } from '@syncfusion/ej2-base';

Schedule.Inject(Day, Week, Month);

let fifaEvents: Object[] = <Object[]>extend([], fifaEventsData, null, true);
let timezone: Timezone = new Timezone();
for (let fifaEvent of fifaEvents) {
    let event: { [key: string]: Object } = fifaEvent as { [key: string]: Object };
    event.StartTime = timezone.removeLocalOffset(<Date>event.StartTime);
    event.EndTime = timezone.removeLocalOffset(<Date>event.EndTime);
}

let scheduleObj: Schedule = new Schedule({
    width: '100%',
    height: '550px',
    selectedDate: new Date(2018, 5, 17),
    views: ['Day', 'Week', 'Month'],
    timezone: 'UTC',
    eventSettings: { dataSource: fifaEvents }
});
scheduleObj.appendTo('#Schedule');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Schedule Typescript Control</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Schedule Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-schedule/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>

<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="Schedule"></div>
    </div>
</body>

</html>
export let fifaEventsData: Object[] = [
    {
        Id: 1,
        Subject: 'RUSSIA vs SAUDI ARABIA',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 14, 15, 0),
        EndTime: new Date(2018, 5, 14, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 2,
        Subject: 'EGYPT vs URUGUAY',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 15, 12, 0),
        EndTime: new Date(2018, 5, 15, 14, 0),
        StartTimezone: 'Asia/Yekaterinburg',
        EndTimezone: 'Asia/Yekaterinburg',
        City: 'Ekaterinburg',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 3,
        Subject: 'MOROCCO vs IR IRAN',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 15, 15, 0),
        EndTime: new Date(2018, 5, 15, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saint Petersburg',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 4,
        Subject: 'PORTUGAL vs SPAIN',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 15, 18, 0),
        EndTime: new Date(2018, 5, 15, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Sochi',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 5,
        Subject: 'FRANCE vs AUSTRALIA',
        Description: 'Group C',
        StartTime: new Date(2018, 5, 16, 10, 0),
        EndTime: new Date(2018, 5, 16, 12, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Kazan',
        CategoryColor: '#7fa900',
        GroupId: 3
    }, {
        Id: 6,
        Subject: 'ARGENTINA vs ICELAND',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 16, 13, 0),
        EndTime: new Date(2018, 5, 16, 15, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 7,
        Subject: 'PERU vs DENMARK',
        Description: 'Group C',
        StartTime: new Date(2018, 5, 16, 16, 0),
        EndTime: new Date(2018, 5, 16, 18, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saransk',
        CategoryColor: '#7fa900',
        GroupId: 3
    }, {
        Id: 8,
        Subject: 'CROATIA vs NIGERIA',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 16, 19, 0),
        EndTime: new Date(2018, 5, 16, 21, 0),
        StartTimezone: 'Europe/Kaliningrad',
        EndTimezone: 'Europe/Kaliningrad',
        City: 'Kaliningrad',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 9,
        Subject: 'COSTA RICA vs SERBIA',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 17, 12, 0),
        EndTime: new Date(2018, 5, 17, 14, 0),
        StartTimezone: 'Europe/Samara',
        EndTimezone: 'Europe/Samara',
        City: 'Samara',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 10,
        Subject: 'GERMANY vs MEXICO',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 17, 15, 0),
        EndTime: new Date(2018, 5, 17, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 11,
        Subject: 'BRAZIL vs SWITZERLAND',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 17, 18, 0),
        EndTime: new Date(2018, 5, 17, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Rostov-On-Don',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 12,
        Subject: 'SWEDEN vs KOREA REPUBLIC',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 18, 12, 0),
        EndTime: new Date(2018, 5, 18, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Nizhny Novgorod',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 13,
        Subject: 'BELGIUM vs PANAMA',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 18, 15, 0),
        EndTime: new Date(2018, 5, 18, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Sochi',
        CategoryColor: '#8e24aa',
        GroupId: 7
    }, {
        Id: 14,
        Subject: 'TUNISIA vs ENGLAND',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 18, 18, 0),
        EndTime: new Date(2018, 5, 18, 20, 0),
        StartTimezone: 'Europe/Volgograd',
        EndTimezone: 'Europe/Volgograd',
        City: 'Volgograd',
        CategoryColor: '#8e24aa',
        GroupId: 7
    }, {
        Id: 15,
        Subject: 'COLOMBIA vs JAPAN',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 19, 12, 0),
        EndTime: new Date(2018, 5, 19, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saransk',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 16,
        Subject: 'POLAND vs SENEGAL',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 19, 15, 0),
        EndTime: new Date(2018, 5, 19, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 17,
        Subject: 'RUSSIA vs EGYPT',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 19, 18, 0),
        EndTime: new Date(2018, 5, 19, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saint Petersburg',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 18,
        Subject: 'PORTUGAL vs MOROCCO',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 20, 12, 0),
        EndTime: new Date(2018, 5, 20, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Rostov-On-Don',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 19,
        Subject: 'URUGUAY vs SAUDI ARABIA',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 20, 15, 0),
        EndTime: new Date(2018, 5, 20, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 20,
        Subject: 'IR IRAN vs SPAIN',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 20, 18, 0),
        EndTime: new Date(2018, 5, 20, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Kazan',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 21,
        Subject: 'DENMARK vs AUSTRALIA',
        Description: 'Group C',
        StartTime: new Date(2018, 5, 21, 12, 0),
        EndTime: new Date(2018, 5, 21, 14, 0),
        StartTimezone: 'Europe/Samara',
        EndTimezone: 'Europe/Samara',
        City: 'Samara',
        CategoryColor: '#7fa900',
        GroupId: 3
    }, {
        Id: 22,
        Subject: 'FRANCE vs PERU',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 21, 15, 0),
        EndTime: new Date(2018, 5, 21, 17, 0),
        StartTimezone: 'Asia/Yekaterinburg',
        EndTimezone: 'Asia/Yekaterinburg',
        City: 'Ekaterinburg',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 23,
        Subject: 'ARGENTINA vs CROATIA',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 21, 18, 0),
        EndTime: new Date(2018, 5, 21, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Nizhny Novgorod',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 24,
        Subject: 'BRAZIL vs COSTA RICA',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 22, 12, 0),
        EndTime: new Date(2018, 5, 22, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saint Petersburg',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 25,
        Subject: 'NIGERIA vs ICELAND',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 22, 15, 0),
        EndTime: new Date(2018, 5, 22, 17, 0),
        StartTimezone: 'Europe/Volgograd',
        EndTimezone: 'Europe/Volgograd',
        City: 'Volgograd',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 26,
        Subject: 'SERBIA vs SWITZERLAND',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 22, 18, 0),
        EndTime: new Date(2018, 5, 22, 20, 0),
        StartTimezone: 'Europe/Kaliningrad',
        EndTimezone: 'Europe/Kaliningrad',
        City: 'Kaliningrad',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 27,
        Subject: 'BELGIUM vs TUNISIA',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 23, 12, 0),
        EndTime: new Date(2018, 5, 23, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#8e24aa',
        GroupId: 7
    }, {
        Id: 28,
        Subject: 'KOREA REPUBLIC vs MEXICO',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 23, 15, 0),
        EndTime: new Date(2018, 5, 23, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Rostov-On-Don',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 29,
        Subject: 'GERMANY vs SWEDEN',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 23, 18, 0),
        EndTime: new Date(2018, 5, 23, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Sochi',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 30,
        Subject: 'ENGLAND vs PANAMA',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 24, 12, 0),
        EndTime: new Date(2018, 5, 24, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Nizhny Novgorod',
        CategoryColor: '#8e24aa',
        GroupId: 7
    }, {
        Id: 31,
        Subject: 'JAPAN vs SENEGAL',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 24, 15, 0),
        EndTime: new Date(2018, 5, 24, 17, 0),
        StartTimezone: 'Asia/Yekaterinburg',
        EndTimezone: 'Asia/Yekaterinburg',
        City: 'Ekaterinburg',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 32,
        Subject: 'POLAND vs COLOMBIA',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 24, 18, 0),
        EndTime: new Date(2018, 5, 24, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Kazan',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 33,
        Subject: 'URUGUAY vs RUSSIA',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 25, 14, 0),
        EndTime: new Date(2018, 5, 25, 16, 0),
        StartTimezone: 'Europe/Samara',
        EndTimezone: 'Europe/Samara',
        City: 'Samara',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 34,
        Subject: 'SAUDI ARABIA vs EGYPT',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 25, 14, 0),
        EndTime: new Date(2018, 5, 25, 16, 0),
        StartTimezone: 'Europe/Volgograd',
        EndTimezone: 'Europe/Volgograd',
        City: 'Volgograd',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 35,
        Subject: 'IR IRAN vs PORTUGAL',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 25, 18, 0),
        EndTime: new Date(2018, 5, 25, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saransk',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 36,
        Subject: 'SPAIN vs MOROCCO',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 25, 18, 0),
        EndTime: new Date(2018, 5, 25, 20, 0),
        StartTimezone: 'Europe/Kaliningrad',
        EndTimezone: 'Europe/Kaliningrad',
        City: 'Kaliningrad',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 37,
        Subject: 'DENMARK vs FRANCE',
        Description: 'Group C',
        StartTime: new Date(2018, 5, 26, 14, 0),
        EndTime: new Date(2018, 5, 26, 16, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#7fa900',
        GroupId: 3
    }, {
        Id: 38,
        Subject: 'AUSTRALIA vs PERU',
        Description: 'Group C',
        StartTime: new Date(2018, 5, 26, 14, 0),
        EndTime: new Date(2018, 5, 26, 16, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Sochi',
        CategoryColor: '#7fa900',
        GroupId: 3
    }, {
        Id: 39,
        Subject: 'NIGERIA vs ARGENTINA',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 26, 18, 0),
        EndTime: new Date(2018, 5, 26, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saint Petersburg',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 40,
        Subject: 'ICELAND vs CROATIA',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 26, 18, 0),
        EndTime: new Date(2018, 5, 26, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Rostov-On-Don',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 41,
        Subject: 'MEXICO vs SWEDEN',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 27, 14, 0),
        EndTime: new Date(2018, 5, 27, 16, 0),
        StartTimezone: 'Asia/Yekaterinburg',
        EndTimezone: 'Asia/Yekaterinburg',
        City: 'Ekaterinburg',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 42,
        Subject: 'KOREA REPUBLIC vs GERMANY',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 27, 14, 0),
        EndTime: new Date(2018, 5, 27, 16, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Kazan',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 43,
        Subject: 'SERBIA vs BRAZIL',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 27, 18, 0),
        EndTime: new Date(2018, 5, 27, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 44,
        Subject: 'SWITZERLAND vs COSTA RICA',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 27, 18, 0),
        EndTime: new Date(2018, 5, 27, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Nizhny Novgorod',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 45,
        Subject: 'JAPAN vs POLAND',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 28, 14, 0),
        EndTime: new Date(2018, 5, 28, 16, 0),
        StartTimezone: 'Europe/Volgograd',
        EndTimezone: 'Europe/Volgograd',
        City: 'Volgograd',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 46,
        Subject: 'SENEGAL vs COLOMBIA',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 28, 14, 0),
        EndTime: new Date(2018, 5, 28, 16, 0),
        StartTimezone: 'Europe/Samara',
        EndTimezone: 'Europe/Samara',
        City: 'Samara',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 47,
        Subject: 'PANAMA vs TUNISIA',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 28, 18, 0),
        EndTime: new Date(2018, 5, 28, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saransk',
        CategoryColor: '#8e24aa',
        GroupId: 4
    }, {
        Id: 48,
        Subject: 'ENGLAND vs BELGIUM',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 28, 18, 0),
        EndTime: new Date(2018, 5, 28, 20, 0),
        StartTimezone: 'Europe/Kaliningrad',
        EndTimezone: 'Europe/Kaliningrad',
        City: 'Kaliningrad',
        CategoryColor: '#8e24aa',
        GroupId: 4
    }
];

Per-event time zones

To keep each appointment in its originating time zone, provide startTimezone and endTimezone properties in the event datasource. The Scheduler will render events with appropriate offsets so that time differences are correctly reflected.

import { Schedule, Day, Week, TimelineViews, Month, Agenda } from '@syncfusion/ej2-schedule';

let data: object[] = [{
    Subject: 'Paris',
    StartTime: new Date(2018, 1, 15, 10, 0),
    EndTime: new Date(2018, 1, 15, 12, 30),
    StartTimezone: 'Europe/Moscow',
    EndTimezone: 'Europe/Moscow'
}];

Schedule.Inject(Day, Week, TimelineViews, Month, Agenda);

let scheduleObj: Schedule = new Schedule({
    height: '550px',
    selectedDate: new Date(2018, 1, 15),
    views: ['Day', 'Week', 'TimelineWeek', 'Month', 'Agenda'],
    eventSettings: {
        dataSource: data
    }
});
scheduleObj.appendTo('#Schedule');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Schedule Typescript Control</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Schedule Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-schedule/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>

<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="Schedule"></div>
    </div>
</body>

</html>

Customize timezone list in the editor

The timezone editor displays a large collection (200+) of time zone names by default. You can customize this collection at the application level to show only relevant zones or to add/remove entries.

import { Schedule, Day, Week, Month, timezoneData } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';

Schedule.Inject(Day, Week, Month);

let customTimezoneData: { [key: string]: Object }[] = [
  { Value: 'America/New_York', Text: '(UTC-05:00) Eastern Time' },
  { Value: 'UTC', Text: 'UTC' },
  { Value: 'Asia/Kolkata', Text: '(UTC+05:30) India Standard Time' }
];

timezoneData.splice(0, timezoneData.length, ...customTimezoneData);

let scheduleObj: Schedule = new Schedule({
  width: '100%',
  height: '550px',
  selectedDate: new Date(2018, 1, 11),
  views: ['Day', 'Week', 'Month'],
  eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Schedule Typescript Control</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Schedule Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-schedule/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>

<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="Schedule"></div>
    </div>
</body>

</html>
export let scheduleData: Object[] = [{
    Id: 1,
    Subject: "Explosion of Betelgeuse Star",
    StartTime: "2018-02-11T14:00:00.000Z",
    EndTime: "2018-02-11T15:30:00.000Z",
    CategoryColor: "#1aaa55"
}, {
    Id: 2,
    Subject: "Thule Air Crash Report",
    StartTime: "2018-02-12T16:30:00.000Z",
    EndTime: "2018-02-12T18:30:00.000Z",
    CategoryColor: "#357cd2"
}, {
    Id: 3,
    Subject: "Blue Moon Eclipse",
    StartTime: "2018-02-13T14:00:00.000Z",
    EndTime: "2018-02-13T15:30:00.000Z",
    CategoryColor: "#7fa900"
}, {
    Id: 4,
    Subject: "Meteor Showers in 2018",
    StartTime: "2018-02-14T17:30:00.000Z",
    EndTime: "2018-02-14T19:00:00.000Z",
    CategoryColor: "#ea7a57"
}, {
    Id: 5,
    Subject: "Milky Way as Melting pot",
    StartTime: "2018-02-15T16:30:00.000Z",
    EndTime: "2018-02-15T018:30:00.000Z",
    CategoryColor: "#00bdae"
}, {
    Id: 6,
    Subject: "Mysteries of Bermuda Triangle",
    StartTime: "2018-02-15T14:00:00.000Z",
    EndTime: "2018-02-15T15:30:00.000Z",
    CategoryColor: "#f57f17"
}, {
    Id: 7,
    Subject: "Glaciers and Snowflakes",
    StartTime: "2018-02-16T15:30:00.000Z",
    EndTime: "2018-02-16T017:00:00.000Z",
    CategoryColor: "#1aaa55"
}, {
    Id: 8,
    Subject: "Life on Mars",
    StartTime: "2018-02-17T13:30:00.000Z",
    EndTime: "2018-02-17T14:30:00.000Z",
    CategoryColor: "#357cd2"
}, {
    Id: 9,
    Subject: "Alien Civilization",
    StartTime: "2018-02-19T15:30:00.000Z",
    EndTime: "2018-02-19T17:30:00.000Z",
    CategoryColor: "#7fa900"
}, {
    Id: 10,
    Subject: "Wildlife Galleries",
    StartTime: "2018-02-21T15:30:00.000Z",
    EndTime: "2018-02-21T17:30:00.000Z",
    CategoryColor: "#ea7a57"
}, {
    Id: 11,
    Subject: "Best Photography 2018",
    StartTime: "2018-02-22T14:00:00.000Z",
    EndTime: "2018-02-22T15:30:00.000Z",
    CategoryColor: "#00bdae"
}, {
    Id: 12,
    Subject: "Smarter Puppies",
    StartTime: "2018-02-09T14:30:00.000Z",
    EndTime: "2018-02-09T16:00:00.000Z",
    CategoryColor: "#f57f17"
}, {
    Id: 13,
    Subject: "Myths of Andromeda Galaxy",
    StartTime: "2018-02-07T15:00:00.000Z",
    EndTime: "2018-02-07T17:00:00.000Z",
    CategoryColor: "#1aaa55"
}, {
    Id: 14,
    Subject: "Aliens vs Humans",
    StartTime: "2018-02-05T14:30:00.000Z",
    EndTime: "2018-02-05T16:00:00.000Z",
    CategoryColor: "#357cd2"
}, {
    Id: 15,
    Subject: "Facts of Humming Birds",
    StartTime: "2018-02-20T14:00:00.000Z",
    EndTime: "2018-02-20T15:30:00.000Z",
    CategoryColor: "#7fa900"
}, {
    Id: 16,
    Subject: "Sky Gazers",
    StartTime: "2018-02-23T15:30:00.000Z",
    EndTime: "2018-02-23T17:30:00.000Z",
    CategoryColor: "#ea7a57"
}, {
    Id: 17,
    Subject: "The Cycle of Seasons",
    StartTime: "2018-02-12T00:00:00.000Z",
    EndTime: "2018-02-12T02:00:00.000Z",
    CategoryColor: "#00bdae"
}, {
    Id: 18,
    Subject: "Space Galaxies and Planets",
    StartTime: "2018-02-12T17:30:00.000Z",
    EndTime: "2018-02-12T18:00:00.000Z",
    CategoryColor: "#f57f17"
}, {
    Id: 19,
    Subject: "Lifecycle of Bumblebee",
    StartTime: "2018-02-15T00:30:00.000Z",
    EndTime: "2018-02-15T02:00:00.000Z",
    CategoryColor: "#7fa900"
}, {
    Id: 20,
    Subject: "Alien Civilization",
    StartTime: "2018-02-15T18:30:00.000Z",
    EndTime: "2018-02-15T19:30:00.000Z",
    CategoryColor: "#ea7a57"
}, {
    Id: 21,
    Subject: "Alien Civilization",
    StartTime: "2018-02-11T18:30:00.000Z",
    EndTime: "2018-02-11T20:30:00.000Z",
    CategoryColor: "#ea7a57"
}, {
    Id: 22,
    Subject: "The Cycle of Seasons",
    StartTime: "2018-02-13T19:00:00.000Z",
    EndTime: "2018-02-13T20:30:00.000Z",
    CategoryColor: "#00bdae"
}, {
    Id: 23,
    Subject: "Sky Gazers",
    StartTime: "2018-02-16T19:00:00.000Z",
    EndTime: "2018-02-16T20:30:00.000Z",
    CategoryColor: "#ea7a57"
}, {
    Id: 24,
    Subject: "Facts of Humming Birds",
    StartTime: "2018-02-17T17:00:00.000Z",
    EndTime: "2018-02-17T19:00:00.000Z",
    CategoryColor: "#7fa900"
}];

export let fifaEventsData: Object[] = [
    {
        Id: 1,
        Subject: 'RUSSIA vs SAUDI ARABIA',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 14, 15, 0),
        EndTime: new Date(2018, 5, 14, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 2,
        Subject: 'EGYPT vs URUGUAY',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 15, 12, 0),
        EndTime: new Date(2018, 5, 15, 14, 0),
        StartTimezone: 'Asia/Yekaterinburg',
        EndTimezone: 'Asia/Yekaterinburg',
        City: 'Ekaterinburg',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 3,
        Subject: 'MOROCCO vs IR IRAN',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 15, 15, 0),
        EndTime: new Date(2018, 5, 15, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saint Petersburg',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 4,
        Subject: 'PORTUGAL vs SPAIN',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 15, 18, 0),
        EndTime: new Date(2018, 5, 15, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Sochi',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 5,
        Subject: 'FRANCE vs AUSTRALIA',
        Description: 'Group C',
        StartTime: new Date(2018, 5, 16, 10, 0),
        EndTime: new Date(2018, 5, 16, 12, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Kazan',
        CategoryColor: '#7fa900',
        GroupId: 3
    }, {
        Id: 6,
        Subject: 'ARGENTINA vs ICELAND',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 16, 13, 0),
        EndTime: new Date(2018, 5, 16, 15, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 7,
        Subject: 'PERU vs DENMARK',
        Description: 'Group C',
        StartTime: new Date(2018, 5, 16, 16, 0),
        EndTime: new Date(2018, 5, 16, 18, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saransk',
        CategoryColor: '#7fa900',
        GroupId: 3
    }, {
        Id: 8,
        Subject: 'CROATIA vs NIGERIA',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 16, 19, 0),
        EndTime: new Date(2018, 5, 16, 21, 0),
        StartTimezone: 'Europe/Kaliningrad',
        EndTimezone: 'Europe/Kaliningrad',
        City: 'Kaliningrad',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 9,
        Subject: 'COSTA RICA vs SERBIA',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 17, 12, 0),
        EndTime: new Date(2018, 5, 17, 14, 0),
        StartTimezone: 'Europe/Samara',
        EndTimezone: 'Europe/Samara',
        City: 'Samara',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 10,
        Subject: 'GERMANY vs MEXICO',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 17, 15, 0),
        EndTime: new Date(2018, 5, 17, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 11,
        Subject: 'BRAZIL vs SWITZERLAND',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 17, 18, 0),
        EndTime: new Date(2018, 5, 17, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Rostov-On-Don',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 12,
        Subject: 'SWEDEN vs KOREA REPUBLIC',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 18, 12, 0),
        EndTime: new Date(2018, 5, 18, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Nizhny Novgorod',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 13,
        Subject: 'BELGIUM vs PANAMA',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 18, 15, 0),
        EndTime: new Date(2018, 5, 18, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Sochi',
        CategoryColor: '#8e24aa',
        GroupId: 7
    }, {
        Id: 14,
        Subject: 'TUNISIA vs ENGLAND',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 18, 18, 0),
        EndTime: new Date(2018, 5, 18, 20, 0),
        StartTimezone: 'Europe/Volgograd',
        EndTimezone: 'Europe/Volgograd',
        City: 'Volgograd',
        CategoryColor: '#8e24aa',
        GroupId: 7
    }, {
        Id: 15,
        Subject: 'COLOMBIA vs JAPAN',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 19, 12, 0),
        EndTime: new Date(2018, 5, 19, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saransk',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 16,
        Subject: 'POLAND vs SENEGAL',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 19, 15, 0),
        EndTime: new Date(2018, 5, 19, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 17,
        Subject: 'RUSSIA vs EGYPT',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 19, 18, 0),
        EndTime: new Date(2018, 5, 19, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saint Petersburg',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 18,
        Subject: 'PORTUGAL vs MOROCCO',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 20, 12, 0),
        EndTime: new Date(2018, 5, 20, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Rostov-On-Don',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 19,
        Subject: 'URUGUAY vs SAUDI ARABIA',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 20, 15, 0),
        EndTime: new Date(2018, 5, 20, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 20,
        Subject: 'IR IRAN vs SPAIN',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 20, 18, 0),
        EndTime: new Date(2018, 5, 20, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Kazan',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 21,
        Subject: 'DENMARK vs AUSTRALIA',
        Description: 'Group C',
        StartTime: new Date(2018, 5, 21, 12, 0),
        EndTime: new Date(2018, 5, 21, 14, 0),
        StartTimezone: 'Europe/Samara',
        EndTimezone: 'Europe/Samara',
        City: 'Samara',
        CategoryColor: '#7fa900',
        GroupId: 3
    }, {
        Id: 22,
        Subject: 'FRANCE vs PERU',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 21, 15, 0),
        EndTime: new Date(2018, 5, 21, 17, 0),
        StartTimezone: 'Asia/Yekaterinburg',
        EndTimezone: 'Asia/Yekaterinburg',
        City: 'Ekaterinburg',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 23,
        Subject: 'ARGENTINA vs CROATIA',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 21, 18, 0),
        EndTime: new Date(2018, 5, 21, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Nizhny Novgorod',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 24,
        Subject: 'BRAZIL vs COSTA RICA',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 22, 12, 0),
        EndTime: new Date(2018, 5, 22, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saint Petersburg',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 25,
        Subject: 'NIGERIA vs ICELAND',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 22, 15, 0),
        EndTime: new Date(2018, 5, 22, 17, 0),
        StartTimezone: 'Europe/Volgograd',
        EndTimezone: 'Europe/Volgograd',
        City: 'Volgograd',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 26,
        Subject: 'SERBIA vs SWITZERLAND',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 22, 18, 0),
        EndTime: new Date(2018, 5, 22, 20, 0),
        StartTimezone: 'Europe/Kaliningrad',
        EndTimezone: 'Europe/Kaliningrad',
        City: 'Kaliningrad',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 27,
        Subject: 'BELGIUM vs TUNISIA',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 23, 12, 0),
        EndTime: new Date(2018, 5, 23, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#8e24aa',
        GroupId: 7
    }, {
        Id: 28,
        Subject: 'KOREA REPUBLIC vs MEXICO',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 23, 15, 0),
        EndTime: new Date(2018, 5, 23, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Rostov-On-Don',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 29,
        Subject: 'GERMANY vs SWEDEN',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 23, 18, 0),
        EndTime: new Date(2018, 5, 23, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Sochi',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 30,
        Subject: 'ENGLAND vs PANAMA',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 24, 12, 0),
        EndTime: new Date(2018, 5, 24, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Nizhny Novgorod',
        CategoryColor: '#8e24aa',
        GroupId: 7
    }, {
        Id: 31,
        Subject: 'JAPAN vs SENEGAL',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 24, 15, 0),
        EndTime: new Date(2018, 5, 24, 17, 0),
        StartTimezone: 'Asia/Yekaterinburg',
        EndTimezone: 'Asia/Yekaterinburg',
        City: 'Ekaterinburg',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 32,
        Subject: 'POLAND vs COLOMBIA',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 24, 18, 0),
        EndTime: new Date(2018, 5, 24, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Kazan',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 33,
        Subject: 'URUGUAY vs RUSSIA',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 25, 14, 0),
        EndTime: new Date(2018, 5, 25, 16, 0),
        StartTimezone: 'Europe/Samara',
        EndTimezone: 'Europe/Samara',
        City: 'Samara',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 34,
        Subject: 'SAUDI ARABIA vs EGYPT',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 25, 14, 0),
        EndTime: new Date(2018, 5, 25, 16, 0),
        StartTimezone: 'Europe/Volgograd',
        EndTimezone: 'Europe/Volgograd',
        City: 'Volgograd',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 35,
        Subject: 'IR IRAN vs PORTUGAL',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 25, 18, 0),
        EndTime: new Date(2018, 5, 25, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saransk',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 36,
        Subject: 'SPAIN vs MOROCCO',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 25, 18, 0),
        EndTime: new Date(2018, 5, 25, 20, 0),
        StartTimezone: 'Europe/Kaliningrad',
        EndTimezone: 'Europe/Kaliningrad',
        City: 'Kaliningrad',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 37,
        Subject: 'DENMARK vs FRANCE',
        Description: 'Group C',
        StartTime: new Date(2018, 5, 26, 14, 0),
        EndTime: new Date(2018, 5, 26, 16, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#7fa900',
        GroupId: 3
    }, {
        Id: 38,
        Subject: 'AUSTRALIA vs PERU',
        Description: 'Group C',
        StartTime: new Date(2018, 5, 26, 14, 0),
        EndTime: new Date(2018, 5, 26, 16, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Sochi',
        CategoryColor: '#7fa900',
        GroupId: 3
    }, {
        Id: 39,
        Subject: 'NIGERIA vs ARGENTINA',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 26, 18, 0),
        EndTime: new Date(2018, 5, 26, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saint Petersburg',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 40,
        Subject: 'ICELAND vs CROATIA',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 26, 18, 0),
        EndTime: new Date(2018, 5, 26, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Rostov-On-Don',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 41,
        Subject: 'MEXICO vs SWEDEN',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 27, 14, 0),
        EndTime: new Date(2018, 5, 27, 16, 0),
        StartTimezone: 'Asia/Yekaterinburg',
        EndTimezone: 'Asia/Yekaterinburg',
        City: 'Ekaterinburg',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 42,
        Subject: 'KOREA REPUBLIC vs GERMANY',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 27, 14, 0),
        EndTime: new Date(2018, 5, 27, 16, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Kazan',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 43,
        Subject: 'SERBIA vs BRAZIL',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 27, 18, 0),
        EndTime: new Date(2018, 5, 27, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 44,
        Subject: 'SWITZERLAND vs COSTA RICA',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 27, 18, 0),
        EndTime: new Date(2018, 5, 27, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Nizhny Novgorod',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 45,
        Subject: 'JAPAN vs POLAND',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 28, 14, 0),
        EndTime: new Date(2018, 5, 28, 16, 0),
        StartTimezone: 'Europe/Volgograd',
        EndTimezone: 'Europe/Volgograd',
        City: 'Volgograd',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 46,
        Subject: 'SENEGAL vs COLOMBIA',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 28, 14, 0),
        EndTime: new Date(2018, 5, 28, 16, 0),
        StartTimezone: 'Europe/Samara',
        EndTimezone: 'Europe/Samara',
        City: 'Samara',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 47,
        Subject: 'PANAMA vs TUNISIA',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 28, 18, 0),
        EndTime: new Date(2018, 5, 28, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saransk',
        CategoryColor: '#8e24aa',
        GroupId: 4
    }, {
        Id: 48,
        Subject: 'ENGLAND vs BELGIUM',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 28, 18, 0),
        EndTime: new Date(2018, 5, 28, 20, 0),
        StartTimezone: 'Europe/Kaliningrad',
        EndTimezone: 'Europe/Kaliningrad',
        City: 'Kaliningrad',
        CategoryColor: '#8e24aa',
        GroupId: 4
    }
];

Timezone utility methods

The Scheduler provides a Timezone utility with helper methods for offset calculation and conversion.

offset

Calculates the offset (in minutes) between the passed UTC date and the specified time zone.

Parameters Type Description
date Date UTC date object.
timezone String IANA time zone identifier (for example, “Europe/Paris”).

Returns number

// Assume local timezone is IST (UTC+05:30)
let timezone: Timezone = new Timezone();
let date: Date = new Date(2018,11,5,15,25,11);
let timeZoneOffset: number = timezone.offset(date, "Europe/Paris");
console.log(timeZoneOffset); // -60

convert

Converts a date from one timezone to another.

Parameters Type Description  
date Date UTC date object.  
fromOffset number string Source timezone (offset in minutes or IANA name).
toOffset number string Target timezone (offset in minutes or IANA name).

Returns Date

// Assume local timezone is IST (UTC+05:30)
let timezone: Timezone = new Timezone();
let date: Date = new Date(2018,11,5,15,25,11);
let convertedDate: Date = timezone.convert(date, "Europe/Paris", "Asia/Tokyo");
let convertedDate1: Date = timezone.convert(date, 60, -360);
console.log(convertedDate);  // 2018-12-05T08:55:11.000Z
console.log(convertedDate1); // 2018-12-05T16:55:11.000Z

add

Adds the time difference between the passed UTC date and the specified timezone, returning a Date adjusted to that zone.

Parameters Type Description
date Date UTC date object.
timezone String IANA time zone identifier.

Returns Date

// Assume local timezone is IST (UTC+05:30)
let timezone: Timezone = new Timezone();
let date: Date = new Date(2018,11,5,15,25,11);
let convertedDate: Date = timezone.add(date, "Europe/Paris");
console.log(convertedDate); // 2018-12-05T05:25:11.000Z

remove

Removes the time difference between the passed UTC date and the specified timezone.

Parameters Type Description
date Date UTC date object.
timezone String IANA time zone identifier.

Returns Date

// Assume local timezone is IST (UTC+05:30)
let timezone: Timezone = new Timezone();
let date: Date = new Date(2018,11,5,15,25,11);
let convertedDate: Date = timezone.remove(date, "Europe/Paris");
console.log(convertedDate); // 2018-12-05T14:25:11.000Z

removeLocalOffset

Removes the local offset from the given date.

Parameters Type Description
date Date UTC date object.

Returns Date

// Assume local timezone is IST (UTC+05:30)
let timezone: Timezone = new Timezone();
let date: Date = new Date(2018,11,5,15,25,11);
let convertedDate: Date = timezone.removeLocalOffset(date);
console.log(convertedDate); // 2018-12-05T15:25:11.000Z

Refer to the JavaScript Scheduler feature tour for an overview of capabilities, and see the JavaScript Scheduler example for sample usage and demonstrations.