React
Demos
Support
Forum
Download
Search results

Timezone

The Scheduler makes use of the System time zone by default. If it needs to follow some other user-specific time zone, then the API timezone can be used. Apart from the default action of applying specific timezone to the entire 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 appointment collection.

Display appointments on client timezone

When no specific time zone is set to Schedule through timezone API, appointments will be displayed based on the client timezone value. It is the default behavior.

Appointments based on Schedule timezone

When specific time zone is set to Schedule through timezone API which is different from client timezone then the appointments will be displayed based on Schedule timezone regardless of its client timezone. In the below demo appointments will be displayed at Eastern Time (UTC -05:00).

The output will be displayed as follows.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from "react-dom";
import {
  ScheduleComponent, Day, Week,  Month,  Timezone, Inject,
  ViewsDirective, ViewDirective
} from '@syncfusion/ej2-react-schedule';
import { fifaEventsData } from './datasource';
import { extend } from '@syncfusion/ej2-base';

class App extends React.Component<{}, {}>{
   private fifaEvents: Object[] = extend([], fifaEventsData, null, true) as Object[];
    private timezone: Timezone = new Timezone();
    private onCreate(): void {
    for (let fifaEvent of this.fifaEvents) {
    let event: { [key: string]: Object } = fifaEvent as { [key: string]: Object };
    event.StartTime = this.timezone.removeLocalOffset(event.StartTime as Date);
    event.EndTime = this.timezone.removeLocalOffset(event.EndTime as Date);
    }
    }
    render() {
        return <ScheduleComponent width= '100%' height='550px' selectedDate= {new Date(2018, 5, 17)} created={this.onCreate.bind(this)} eventSettings={ { dataSource: this.fifaEvents } } timezone='America/New_York' >
        <ViewsDirective>
          <ViewDirective option='Day' />
          <ViewDirective option='Week' />
          <ViewDirective option='Month' />
        </ViewsDirective>
            <Inject services={[Day, Week,  Month]} />
        </ScheduleComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('schedule'));

Display appointments on same time everywhere

Setting timezone to UTC will only display appointments as same as in database timings for all users in different time zone.

Source
Preview
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from "react-dom";
import {
  ScheduleComponent, Day, Week,  Month,  Timezone, Inject,
  ViewsDirective, ViewDirective
} from '@syncfusion/ej2-react-schedule';
import { fifaEventsData } from './datasource';
import { extend } from '@syncfusion/ej2-base';

class App extends React.Component<{}, {}>{
    private fifaEvents: Object[] = extend([], fifaEventsData, null, true) as Object[];
    private timezone: Timezone = new Timezone();
    private onCreate(): void {
    for (let fifaEvent of this.fifaEvents) {
    let event: { [key: string]: Object } = fifaEvent as { [key: string]: Object };
    event.StartTime = this.timezone.removeLocalOffset(event.StartTime as Date);
    event.EndTime = this.timezone.removeLocalOffset(event.EndTime as Date);
    }
    }
    render() {
        return <ScheduleComponent width= '100%' height='550px' selectedDate= {new Date(2018, 5, 17) } created={this.onCreate.bind(this)} eventSettings={ { dataSource: this.fifaEvents } } timezone='UTC' >
            <ViewsDirective>
                <ViewDirective option='Day' />
                <ViewDirective option='Week' />
                <ViewDirective option='Month' />
            </ViewsDirective>
            <Inject services={[Day, Week,  Month]} />
        </ScheduleComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Customizing the timezone collection

Instead of displaying all the default timezone collection, (more than 200), you can display your custom collection at sample side as shown below.

Source
Preview
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from "react-dom";
import {
  ScheduleComponent, Day, Week,  Month, timezoneData, Inject
} from '@syncfusion/ej2-react-schedule';
import { fifaEventsData } from './datasource';
import { extend } from '@syncfusion/ej2-base';

class App extends React.Component<{}, {}>{
    private data: Object[] = extend([], fifaEventsData, null, true) as Object[];
    private rendereComplete(): void {
        let eventsData: { [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'}
    ];
    eventsData.forEach((data)=> timezoneData.splice(0, timezoneData.length, data));
    }

    render() {
        return <ScheduleComponent width= '100%' height='550px' selectedDate= {new Date(2018, 5, 17)} eventSettings={ { dataSource: this.data } } >
            <Inject services={[Day, Week,  Month]} />
        </ScheduleComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Previous
Next