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.
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.
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.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
function App() {
const scheduleData = [{
Id: 3,
Subject: 'Paris',
StartTime: new Date(2018, 1, 15, 9, 0),
EndTime: new Date(2018, 1, 15, 10, 0)
}];
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 11)} eventSettings={{ dataSource: scheduleData }}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]}/>
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
<!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/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/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>
import * as React from 'react';
import * as ReactDOM from "react-dom";
import {
ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject
} from '@syncfusion/ej2-react-schedule';
function App() {
const scheduleData: Object[] = [{
Id: 3,
Subject: 'Paris',
StartTime: new Date(2018, 1, 15, 9, 0),
EndTime: new Date(2018, 1, 15, 10, 0)
}];
return (
<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 11)} eventSettings={{ dataSource: scheduleData }} >
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>
)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
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).
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
function App() {
let data = extend([], scheduleData, null, true);
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 17)} eventSettings={{ dataSource: data }} timezone='America/New_York'>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]}/>
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
<!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/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/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>
import * as React from 'react';
import * as ReactDOM from "react-dom";
import {
ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject,
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
function App() {
let data: Object[] = extend([], scheduleData, null, true) as Object[];
return (
<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 17)} eventSettings={{ dataSource: data }} timezone='America/New_York' >
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>
)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
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.
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';
function App() {
let fifaEvents = extend([], fifaEventsData, null, true);
let timezone = new Timezone();
function onCreate() {
for (let fifaEvent of fifaEvents) {
let event = fifaEvent;
event.StartTime = timezone.removeLocalOffset(event.StartTime);
event.EndTime = timezone.removeLocalOffset(event.EndTime);
}
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 5, 17)} created={onCreate} eventSettings={{ dataSource: fifaEvents }} timezone='UTC'>
<ViewsDirective>
<ViewDirective option='Day'/>
<ViewDirective option='Week'/>
<ViewDirective option='Month'/>
</ViewsDirective>
<Inject services={[Day, Week, Month]}/>
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
<!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/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/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>
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';
function App() {
let fifaEvents: Object[] = extend([], fifaEventsData, null, true) as Object[];
let timezone: Timezone = new Timezone();
function onCreate(): void {
for (let fifaEvent of fifaEvents) {
let event: { [key: string]: Object } = fifaEvent as { [key: string]: Object };
event.StartTime = timezone.removeLocalOffset(event.StartTime as Date);
event.EndTime = timezone.removeLocalOffset(event.EndTime as Date);
}
}
return (
<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 5, 17)} created={onCreate} eventSettings={{ dataSource: fifaEvents }} timezone='UTC' >
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, Month]} />
</ScheduleComponent>
)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
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.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
function App() {
const scheduleData = [{
Id: 3,
Subject: 'Paris',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
StartTimezone: 'Europe/Moscow',
EndTimezone: 'Europe/Moscow'
}];
return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 11)} eventSettings={{ dataSource: scheduleData }}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]}/>
</ScheduleComponent>;
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
<!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/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/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>
import * as React from 'react';
import * as ReactDOM from "react-dom";
import {
ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject
} from '@syncfusion/ej2-react-schedule';
function App() {
const scheduleData: Object[] = [{
Id: 3,
Subject: 'Paris',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
StartTimezone: 'Europe/Moscow',
EndTimezone: 'Europe/Moscow'
}];
return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 11)} eventSettings={{ dataSource: scheduleData }} >
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
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.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { useEffect } from 'react';
import { ScheduleComponent, Day, Week, Month, timezoneData, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
function App() {
const data = extend([], scheduleData, null, true);
const timeZones = [
{ Value: 'America/New_York', Text: '(UTC-05:00) Eastern Time' },
{ Value: 'UTC', Text: 'UTC' },
{ Value: 'Asia/Kolkata', Text: '(UTC+05:30) India Standard Time' }
];
useEffect(() => {
timezoneData.splice(0, timezoneData.length, timeZones);
}, []);
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 1)} eventSettings={{ dataSource: data }}>
<Inject services={[Day, Week, Month]}/>
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
<!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/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/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>
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { useEffect } from 'react';
import {
ScheduleComponent, Day, Week, Month, timezoneData, Inject
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
function App() {
const data: Object[] = extend([], scheduleData, null, true) as Object[];
const timeZones: { [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' }
];
useEffect(() => {
timezoneData.splice(0, timezoneData.length, timeZones as any);
}, []);
return (
<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 1)} eventSettings={{ dataSource: data }} >
<Inject services={[Day, Week, Month]} />
</ScheduleComponent>
)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
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
// Assume your local timezone as IST/UTC+05:30
let timezone: Timezone = new Timezone();
let date: Date = new Date(2018,11,5,15,25,11);
let timeZoneOffset: number = timezone.offset(date,"Europe/Paris");
console.log(timeZoneOffset); //-60
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
// Assume your local timezone as IST/UTC+05:30
let timezone: Timezone = new Timezone();
let date: Date = new Date(2018,11,5,15,25,11);
let convertedDate: Date = timezone.convert(date, "Europe/Paris", "Asia/Tokya");
let convertedDate1: Date = timezone.convert(date, 60, -360);
console.log(convertedDate); //2018-12-05T08:55:11.000Z
console.log(convertedDate1); //2018-12-05T16:55:11.000Z
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
// Assume your local timezone as IST/UTC+05:30
let timezone: Timezone = new Timezone();
let date: Date = new Date(2018,11,5,15,25,11);
let convertedDate: Date = timezone.add(date, "Europe/Paris");
console.log(convertedDate); //2018-12-05T05:25:11.000Z
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
// Assume your local timezone as IST/UTC+05:30
let timezone: Timezone = new Timezone();
let date: Date = new Date(2018,11,5,15,25,11);
let convertedDate: Date = timezone.remove(date, "Europe/Paris");
console.log(convertedDate); //2018-12-05T14:25:11.000Z
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
// Assume your local timezone as IST/UTC+05:30
let timezone: Timezone = new Timezone();
let date: Date = new Date(2018,11,5,15,25,11);
let convertedDate: Date = timezone.removeLocalOffset(date);
console.log(convertedDate); //2018-12-05T15:25:11.000Z
You can refer to our React Scheduler feature tour page for its groundbreaking feature representations. You can also explore our React Scheduler example to knows how to present and manipulate data.