---
title: "Javascript Scheduler Multiple Timezone Support Example | Mobiscroll"
component: "Scheduler"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/scheduler/multiple-timezone-support"
---
# Multiple Timezone Support - JavaScript Scheduler demo
Show the same events in different timezones in the Javascript Scheduler — add a header dropdown to let users switch the display timezone at runtime. Plain JavaScript API.
- [Live demo](https://demo.mobiscroll.com/javascript/scheduler/multiple-timezone-support)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/scheduler/multiple-timezone-support)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/scheduler/multiple-timezone-support.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/multiple-timezone-support.md), [React](https://demo.mobiscroll.com/react/scheduler/multiple-timezone-support.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/multiple-timezone-support.md)
## Description
If the context requires users being able to change the timezone on the fly, you can add a custom dropdown with the desired timezones to the event calendar header. This can be of course placed externally to the calendar as well, eg. setting page.
Set the timezone of the incoming data through the [`dataTimezone`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dataTimezone) - eg. `'utc'`, and set the display timezone through the [`displayTimezone`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-displayTimezone) - eg. `'America/Los_Angeles'`
**Wanna show multiple timezone tracks?** [Check out the next example →](https://demo.mobiscroll.com/javascript/scheduler/show-multiple-timezones)
## What this demo shows
- A desktop weekly scheduler where the same event data can be displayed in different timezones.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Timezone switcher** A custom dropdown next to the navigation arrows lets the user choose from different timezone options. By default UTC is selected.
- **Timezone behavior** Changing the selected timezone updates the visible event times in the weekly scheduler view based on the selected timezone.
- **Week view** The fixed strip below the header displays the days of the selected week, with the current date highlighted by a blue circle.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected week.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.
## Best for
- **Global scheduling** Apps that need to show the same events for users across multiple countries or regions.
- **Event planning** Event management, conference, webinar, or attendee-facing schedulers where local time presentation matters.
- **Distributed teams** Business calendars used by remote teams working across different timezones.
- **Timezone preview** Products that let users switch the scheduler display timezone on the fly from the UI or from external settings.
## API used in this demo
- [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`timezonePlugin`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-timezonePlugin) - option
- [`dataTimezone`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dataTimezone) - option
- [`displayTimezone`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-displayTimezone) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToResize) - option
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option
- [`renderHeader`](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderHeader) - renderer
- [`inputElement`](https://mobiscroll.com/docs/javascript/select/api#opt-inputElement) - option
- [`display`](https://mobiscroll.com/docs/javascript/select/api#opt-display) - option
- [`touchUi`](https://mobiscroll.com/docs/javascript/select/api#opt-touchUi) - option
- [`onChange`](https://mobiscroll.com/docs/javascript/select/api#event-onChange) - event
- [`setOptions`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setOptions) - method
## Code
### JS
```js
dayjs.extend(window.dayjs_plugin_utc);
dayjs.extend(window.dayjs_plugin_timezone);
mobiscroll.dayjsTimezone.dayjs = dayjs;
mobiscroll.setOptions({
theme: 'ios',
themeVariant: 'light'
});
var calendarInst = mobiscroll.eventcalendar('#demo-showing-events-timezone', {
timezonePlugin: mobiscroll.dayjsTimezone,
dataTimezone: 'utc',
displayTimezone: 'utc',
view: {
scheduler: { type: 'week' },
},
dragToCreate: true,
dragToMove: true,
dragToResize: true,
data: [
{
start: '2026-10-21T07:00',
end: '2026-10-21T09:00',
title: 'Stakeholder mtg.',
color: '#408cff',
},
{
start: '2026-10-22T18:00',
end: '2026-10-22T19:30',
title: 'Wrapup mtg.',
color: '#ecbc72',
},
{
start: '2026-10-23T14:00',
end: '2026-10-23T18:00',
title: 'Business of Software Conference',
color: '#ff6d42',
},
{
start: '2026-10-24T20:00',
end: '2026-10-24T21:50',
title: 'Product Team mtg.',
color: '#913aa7',
},
{
start: '2026-10-25T13:00',
end: '2026-10-25T15:00',
title: 'Decision Making mtg.',
color: '#5bb7c5',
},
{
start: '2026-10-26T13:00',
end: '2026-10-26T14:00',
title: 'Quick mtg. with Martin',
color: '#fd002f',
},
{
start: '2026-10-27T12:00',
end: '2026-10-27T16:00',
color: '#50b166',
title: 'Team-Building',
},
],
renderHeader: function () {
return (
'' +
''
);
},
});
mobiscroll.select('#md-timezone-select', {
inputElement: document.getElementById('md-timezone-input'),
display: 'anchored',
touchUi: false,
onChange: function (ev) {
calendarInst.setOptions({
displayTimezone: ev.value,
});
},
});
```
### HTML
```html
```
### CSS
```css
.md-timezone-header .mbsc-textfield-wrapper {
margin: 0.5em;
}
.md-timezone-header {
display: flex;
align-items: center;
margin-left: auto;
}
```
## Implementation notes
- The dayjs setup and event data are the same as the `setting-the-timezone` demo: import `dayjs` + `utc` + `timezone` plugins, extend dayjs with both, and assign `dayjsTimezone.dayjs = dayjs`. Set `dataTimezone="utc"` and `timezonePlugin={dayjsTimezone}` on the Eventcalendar. `displayTimezone` starts at `'utc'` and is controlled by a dropdown in the custom header.
- Use `view: { scheduler: { type: 'week' } }`.
- Use `renderHeader` (Angular: `headerTemplate`, Vue: `#header` slot) to build the header: `CalendarNav` on the left, and a right-aligned group containing `CalendarPrev`, `CalendarToday`, `CalendarNext`, followed by a `Select`.
- Configure the `Select` with `inputStyle="box"`, `touchUi={false}`, `display="anchored"`. Pass 9 `{ text, value }` objects covering US, UTC, European, and Asian timezones (America/Los_Angeles through Asia/Tokyo). Default selection is `'utc'`.
- Bind the selected timezone value to `displayTimezone` on the Eventcalendar; for the imperative API, call `inst.setOptions({ displayTimezone: ev.value })` in the `Select`'s `onChange`.
## Run it in your project
1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).
2. Clone the repository:
```
git clone https://github.com/acidb/mobiscroll-demos-javascript.git
```
3. If not installed yet, install the Mobiscroll CLI from NPM:
```
npm install -g @mobiscroll/cli
```
4. Config Mobiscroll - open a terminal window in the root directory and run:
```
mobiscroll config javascript
```
5. Install dependencies - open a terminal window in the root directory and run:
```
npm install
```
6. Run the project:
```
npm run dev
```
On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.
Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation
## Related demos
- Previous: [Event Buffer](https://demo.mobiscroll.com/javascript/scheduler/event-buffer.md) - Add buffer time before or after events in the Javascript Scheduler to visualize travel time, check-in/check-out, loading, or cleanup in the schedule grid.
- Next: [Custom Event Order](https://demo.mobiscroll.com/javascript/scheduler/custom-event-sort.md) - Control the event display order in a Javascript Scheduler — set per-event priorities or a custom sort function to override the default ordering rules.