# Timezone in React Scheduler
The Scheduler component uses the current system timezone by default. To schedule events according to a different timezone, use the [`timezone`](https://ej2.syncfusion.com/react/documentation/api/schedule#timezone) property. In addition to applying a specific timezone at the Scheduler level, individual appointments can have their own timezones using the [`startTimezone`](https://helpej2.syncfusion.com/react/documentation/api/schedule/field#starttimezone) and [`endTimezone`](https://helpej2.syncfusion.com/react/documentation/api/schedule/field#endtimezone) properties within the event fields collection.
> Note: The **timezone** property applies only to appointment processing and the current time indicator.
## Understanding date manipulation in JavaScript
The `new Date()` constructor in JavaScript returns the exact current date with the complete time and timezone information. For example, it may return a value such as `Wed Dec 12 2018 05:23:27 GMT+0530 (India Standard Time)`, indicating the current date as December 12, 2018, and the current time as 5:23 AM in the IST timezone.
## Scheduler without a specific timezone
When the Scheduler's `timezone` property is not set, appointments are displayed based on the client system's timezone. As a result, the same appointment may appear with different start and end times to users in different timezones.
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.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
const App = () => {
const scheduleData = [{
Id: 3,
Subject: 'Paris',
StartTime: new Date(2018, 1, 15, 9, 0),
EndTime: new Date(2018, 1, 15, 10, 0)
}];
const eventSettings = { dataSource: scheduleData };
return ();
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render();
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import {
ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
const App = () => {
const scheduleData: Object[] = [{
Id: 3,
Subject: 'Paris',
StartTime: new Date(2018, 1, 15, 9, 0),
EndTime: new Date(2018, 1, 15, 10, 0)
}];
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
return (
)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render();
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Syncfusion React Schedule
Loading....
{% endhighlight %}
{% endtabs %}
## Set a specific timezone for the Scheduler
When a timezone is set through the [`timezone`](https://ej2.syncfusion.com/react/documentation/api/schedule#timezone) property, appointments are displayed according to the Scheduler's timezone, regardless of the user's system timezone. In the following example, appointments are shown in Eastern Time (UTC -05:00).
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
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';
const App = () => {
const eventSettings = { dataSource: scheduleData };
return ();
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render();
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import {
ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
return (
)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render();
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Syncfusion React Schedule
Loading....
{% endhighlight %}
{% endtabs %}
## Display events on same time everywhere with no time difference
Setting [`timezone`](https://ej2.syncfusion.com/react/documentation/api/schedule#timezone) to UTC for Scheduler will display the appointments on same time as in the database for all the users in different time zone.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
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';
const App = () => {
const eventSettings = { dataSource: fifaEventsData };
let timezone = new Timezone();
const onCreate = () => {
for (let fifaEvent of fifaEventsData) {
let event = fifaEvent;
event.StartTime = timezone.removeLocalOffset(event.StartTime);
event.EndTime = timezone.removeLocalOffset(event.EndTime);
}
}
return ();
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render();
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import {
ScheduleComponent, Day, Week, Month, Timezone, Inject,
ViewsDirective, ViewDirective, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { fifaEventsData } from './datasource';
const App = () => {
const eventSettings: EventSettingsModel = { dataSource: fifaEventsData };
let timezone: Timezone = new Timezone();
const onCreate = (): void => {
for (let fifaEvent of fifaEventsData) {
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 (
)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render();
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Syncfusion React Schedule
Loading....
{% endhighlight %}
{% endtabs %}
## Assign specific timezones to events
It is possible to set different timezone for Scheduler events by setting [`startTimezone`](https://helpej2.syncfusion.com/react/documentation/api/schedule/field#starttimezone) and [`endTimezone`](https://helpej2.syncfusion.com/react/documentation/api/schedule/field#endtimezone) properties within the [`eventSettings`](https://helpej2.syncfusion.com/react/documentation/api/schedule/eventSettings) option. It allows each appointment to maintain different timezone and displays on Scheduler with appropriate time differences.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
const 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'
}];
const eventSettings = { dataSource: scheduleData };
return ;
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render();
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import {
ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
const 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'
}];
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
return
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render();
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Syncfusion React Schedule
Loading....
{% endhighlight %}
{% endtabs %}
## 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.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
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';
const App = () => {
const eventSettings = { dataSource: scheduleData };
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 ();
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render();
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { useEffect } from 'react';
import {
ScheduleComponent, Day, Week, Month, timezoneData, Inject, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
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 (
)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render();
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Syncfusion React Schedule
Loading....
{% endhighlight %}
{% endtabs %}
## Timezone methods
### offset
Calculates the difference, in minutes, between the specified UTC date and a target timezone.
| Parameters | Type | Description |
|------------|------|-------------|
| Date | Date | UTC time as date object.|
| Timezone | String | Timezone.|
Returns `number`
```ts
// 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
```
### 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`
```ts
// 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
```
### add
Adds the time difference between the specified UTC date and a target timezone to the date.
| Parameters | Type | Description |
|------------|------|-------------|
| Date | Date | UTC time as a date object.|
| Timezone | String | Timezone.|
Returns `Date`
```ts
// 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
```
### 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`
```ts
// 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
```
### removeLocalOffset
Removes the local timezone offset from the given date.
| Parameters | Type | Description |
|------------|------|-------------|
| Date | Date | UTC as date object.|
Returns `Date`
```ts
// 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](https://www.syncfusion.com/react-components/react-scheduler) feature tour page for its groundbreaking feature representations. You can also explore our [React Scheduler example](https://ej2.syncfusion.com/react/demos/#/bootstrap5/schedule/overview) to knows how to present and manipulate data.