Search results

Timezone in Vue Schedule component

14 Apr 2021 / 7 minutes to read

The Scheduler makes use of the current system time zone by default. If it needs to follow some other user-specific time zone, then the timezone property needs to be used. Apart from the default action of applying specific timezone to the Scheduler, it is also possible to set different time zone values for each appointments through the properties startTimezone and endTimezone which can be defined as separate fields within the event fields collection.

Understanding date manipulation in JavaScript

The new Date() in JavaScript returns the exact current date object with complete time and timezone information. For example, it may return value such as Wed Dec 12 2018 05:23:27 GMT+0530 (India Standard Time) which indicates that the current date is December 12, 2018 and the current time is 5.23 AM on browsers following the IST timezone.

Scheduler with no timezone

When no specific time zone is set to Scheduler, appointments will be displayed based on the client system’s timezone which is the default behavior. Here, the same appointment when viewed from different timezone will have different start and end times.

The following code example displays an appointment from 9.00 AM to 10.00 AM when you open the Scheduler from any of the timezone. This is because, we are providing the start and end time enclosing with new Date() which works based on the client browser’s timezone.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
  <div id='app'>
    <div id='container'>
        <ejs-schedule :height='height' :selectedDate='selectedDate' :eventSettings='eventSettings'>
            <e-views>
                <e-view option='Day'></e-view>
                <e-view option='Week'></e-view>
                <e-view option='TimelineWeek'></e-view>
                <e-view option='Month'></e-view>
                <e-view option='Agenda'></e-view>
            </e-views>
        </ejs-schedule>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { SchedulePlugin, Day, Week, TimelineViews, Month, Agenda } from '@syncfusion/ej2-vue-schedule';

Vue.use(SchedulePlugin);

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

export default {
  data (){
    return {
        height: '550px',
        selectedDate: new Date(2018, 1, 15),
        eventSettings: {
            dataSource: data
        }
    }
  },
  provide: {
    schedule: [Day, Week, TimelineViews, Month, Agenda]
  }
}

</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
  "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  exports.scheduleData = [
    {
      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"
    }
  ];
  exports.fifaEventsData = [
    {
      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
    }
  ];
});

Scheduler set to specific timezone

When a time zone is set to Scheduler through timezone property, the appointments will be displayed exactly based on the Scheduler timezone regardless of its client timezone. In the following code example, appointments will be displayed based on Eastern Time (UTC -05:00).

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
    <div>
        <div id='app'>
            <div id='container'>
                <ejs-schedule height='550px' :selectedDate='selectedDate' :timezone='timezone' :eventSettings='eventSettings'>
                    <e-views>
                        <e-view option='Day'></e-view>
                        <e-view option='Week'></e-view>
                        <e-view option='Month'></e-view>
                    </e-views>
                </ejs-schedule>
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { scheduleData } from './datasource.js';
    import { SchedulePlugin, Day, Week, Month } from '@syncfusion/ej2-vue-schedule';

    Vue.use(SchedulePlugin);

    export default {
        data () {
            return {
                eventSettings: { dataSource: scheduleData },
                selectedDate: new Date(2018, 1, 17),
                timezone: 'America/New_York'
            }
        },
        provide: {
            schedule: [Day, Week, Month]
        }
    }
</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
  "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  exports.scheduleData = [
    {
      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"
    }
  ];
  exports.fifaEventsData = [
    {
      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
    }
  ];
});

Display events on same time everywhere with no time difference

Setting timezone to UTC for Scheduler will display the appointments on same time as in the database for all the users in different time zone.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
    <div>
        <div id='app'>
            <div id='container'>
                <ejs-schedule height='550px' :selectedDate='selectedDate' :timezone='timezone' :eventSettings='eventSettings'>
                    <e-views>
                        <e-view option='Day'></e-view>
                        <e-view option='Week'></e-view>
                        <e-view option='Month'></e-view>
                    </e-views>
                </ejs-schedule>
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { fifaEventsData } from './datasource.js';
    import { extend } from '@syncfusion/ej2-base';
    import { SchedulePlugin, Day, Week, Month } from '@syncfusion/ej2-vue-schedule';
    import { Timezone } from '@syncfusion/ej2-schedule';
    Vue.use(SchedulePlugin);
    let timezone = new Timezone();
    var data = extend([], fifaEventsData, null, true);
    for (var i = 0; i < data.length; i++) {
        data[i].StartTime = timezone.removeLocalOffset(data[i].StartTime);
        data[i].EndTime = timezone.removeLocalOffset(data[i].EndTime);
    }

    export default {
        data () {
            return {
                eventSettings: { dataSource: data },
                selectedDate: new Date(2018, 5, 17),
                timezone: 'UTC'
            }
        },
        provide: {
            schedule: [Day, Week, Month]
        }
    }
</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
  "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  exports.scheduleData = [
    {
      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"
    }
  ];
  exports.fifaEventsData = [
    {
      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
    }
  ];
});

Set specific timezone for events

It is possible to set different timezone for Scheduler events by setting startTimezone and endTimezone properties within the eventSettings option. It allows each appointment to maintain different timezone and displays on Scheduler with appropriate time differences.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
  <div id='app'>
    <div id='container'>
        <ejs-schedule :height='height' :selectedDate='selectedDate' :eventSettings='eventSettings'>
            <e-views>
                <e-view option='Day'></e-view>
                <e-view option='Week'></e-view>
                <e-view option='TimelineWeek'></e-view>
                <e-view option='Month'></e-view>
                <e-view option='Agenda'></e-view>
            </e-views>
        </ejs-schedule>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { SchedulePlugin, Day, Week, TimelineViews, Month, Agenda } from '@syncfusion/ej2-vue-schedule';

Vue.use(SchedulePlugin);

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

export default {
  data (){
        return {
            height: '550px',
            selectedDate: new Date(2018, 1, 15),
            eventSettings: {
                dataSource: data
            }
        }
    },
    provide: {
        schedule: [Day, Week, TimelineViews, Month, Agenda]
    }
}

</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
  "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  exports.scheduleData = [
    {
      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"
    }
  ];
  exports.fifaEventsData = [
    {
      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
    }
  ];
});

Add or remove timezone names to/from the timezone collection

Instead of displaying all the timezone names within the timezone collection (more than 200 are displayed on the editor window timezone fields by default), you can customize the timezone collection at application end as shown in the following example.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
  <div id='app'>
    <div id='container'>
        <ejs-schedule :height='height' :selectedDate='selectedDate' :eventSettings='eventSettings'>
            <e-views>
                <e-view option='Day'></e-view>
                <e-view option='Week'></e-view>
                <e-view option='Month'></e-view>
            </e-views>
        </ejs-schedule>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { SchedulePlugin, Day, Week, Month, timezoneData } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';

Vue.use(SchedulePlugin);

let data: { [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, ...data);

export default {
    data (){
        return {
            height: '550px',
            selectedDate: new Date(2018, 1, 1),
            eventSettings: {
                dataSource: scheduleData
            }
        }
    },
    provide: {
        schedule: [Day, Week, Month]
    }
}
</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
  "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  exports.scheduleData = [
    {
      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"
    }
  ];
  exports.fifaEventsData = [
    {
      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 methods

offset

This method is used to calculate the difference between passed UTC date and timezone.

Parameters Type Description
Date Date UTC time as date object.
Timezone String Timezone.

Returns number

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

convert

This method is used to convert the passed date from one timezone to another timezone.

Parameters Type Description
Date Date UTC time as date object.
fromOffset number/string Timezone from which date need to be converted.
toOffset number/string Timezone to which date need to be converted.

Returns Date

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

add

This method is used to add the time difference between passed UTC date and timezone.

Parameters Type Description
Date Date UTC time as date object.
Timezone String Timezone.

Returns Date

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

remove

This method is used to remove the time difference between passed UTC date and timezone.

Parameters Type Description
Date Date UTC as date object.
Timezone String Timezone.

Returns Date

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

removeLocalOffset

This method is used to remove the local offset time from the date passed.

Parameters Type Description
Date Date UTC as date object.

Returns Date

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