---
title: "Javascript Timeline Multiple Timezone Support Example | Mobiscroll"
component: "Timeline"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/timeline/multiple-timezone-support"
---
# Multiple Timezone Support - JavaScript Timeline demo
Add a timezone-switcher dropdown to Javascript Timeline header — users change display timezone on the fly, with data timezones configured independently. Plain JavaScript API.
- [Live demo](https://demo.mobiscroll.com/javascript/timeline/multiple-timezone-support)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/timeline/multiple-timezone-support)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/timeline/multiple-timezone-support.md), [Angular](https://demo.mobiscroll.com/angular/timeline/multiple-timezone-support.md), [React](https://demo.mobiscroll.com/react/timeline/multiple-timezone-support.md), [Vue](https://demo.mobiscroll.com/vue/timeline/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'`
## What this demo shows
- A desktop weekly timeline where days are arranged horizontally and resources are listed as rows on the left.
- **Header navigation** The month and year label opens date navigation, while the previous and next arrows move between weeks and the Today button returns to the current date.
- **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 timeline view based on the selected timezone.
- **Week view** The strip below the header shows the selected week from Sunday to Saturday, with the current date highlighted.
- **Time grid** The timeline displays hourly columns from 12 AM to 12 PM.
- **Resources** Multiple resources are shown as separate timeline rows.
- **Current time** A vertical blue line with a time label marks the current time.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event cards** Events are shown as colored cards with a left color stripe, a bold title, and the exact time range.
- **Date positioning** Events are positioned by their assigned resource and exact date and time range.
- **Event interaction** Events highlight on hover and show drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** New events can be created by double-clicking the timeline or by clicking and dragging across a time range.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through time and resources.
## 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 timeline 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
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-resources) - 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-multiple-timezone-support', {
timezonePlugin: mobiscroll.dayjsTimezone,
dataTimezone: 'utc',
displayTimezone: 'utc',
view: {
timeline: { type: 'week' },
},
data: [
{
start: '2026-10-28T07:00',
end: '2026-10-28T09:00',
title: 'Stakeholder mtg.',
resource: [1, 2, 4],
},
{
start: '2026-10-31T18:00',
end: '2026-10-31T19:30',
title: 'Wrapup mtg.',
resource: [2, 3, 5],
},
{
start: '2026-10-28T14:00',
end: '2026-10-28T18:00',
title: 'Business of Software Conference',
resource: [1, 3],
},
{
start: '2026-10-29T20:00',
end: '2026-10-29T21:50',
title: 'Product Team mtg.',
resource: [2, 3, 4],
},
{
start: '2026-10-27T13:00',
end: '2026-10-27T15:00',
title: 'Decision Making mtg.',
resource: [1, 4, 5],
},
{
start: '2026-10-29T13:00',
end: '2026-10-29T14:00',
title: 'Quick mtg. with Martin',
resource: 3,
},
{
start: '2026-10-31T12:00',
end: '2026-10-31T16:00',
title: 'Team-Building',
resource: [1, 2, 3, 4, 5],
},
],
resources: [
{
id: 1,
name: 'Resource A',
color: '#fdf500',
},
{
id: 2,
name: 'Resource B',
color: '#ff0101',
},
{
id: 3,
name: 'Resource C',
color: '#01adff',
},
{
id: 4,
name: 'Resource D',
color: '#239a21',
},
{
id: 5,
name: 'Resource E',
color: '#ff4600',
},
],
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, events, resources, and `timeline: { type: 'week' }` view config are identical to the `setting-the-timezone` demo. `dataTimezone` is fixed at `'utc'`; `displayTimezone` starts at `'utc'` and is controlled by a `Select` dropdown in the custom header.
- Use `renderHeader` (Angular: `headerTemplate`, Vue: `#header` slot) to build the header in two parts: `CalendarNav` on the left, and a right-aligned group on the right containing `CalendarPrev`, `CalendarToday`, `CalendarNext`, followed by a `Select`.
- Configure the `Select` with `inputStyle="box"`, `touchUi={false}`, `display="anchored"`. Pass a `data` array of 9 `{ text, value }` objects covering US, UTC, European and Asian timezones (America/Los_Angeles, America/Chicago, America/New_York, utc, Europe/London, Europe/Berlin, Europe/Bucharest, Asia/Shanghai, Asia/Tokyo). Default selection is `'utc'`.
- Bind the selected timezone value to `displayTimezone` on the `Eventcalendar`; for the imperative API, call `calendarInst.setOptions({ displayTimezone: ev.value })` in the `Select`'s `onChange` handler.
## 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: [Data & Display Timezone](https://demo.mobiscroll.com/javascript/timeline/setting-the-timezone.md) - Set separate data and display timezones on a Javascript Timeline — configure per-resource event timezone display using Luxon, Moment-timezone, or Day.js.
- Next: [Event Search Sidebar](https://demo.mobiscroll.com/javascript/timeline/searching-events-in-sidebar.md) - Search and filter Javascript timeline events in real time — results appear in a sidebar agenda as you type, clicking the event navigates to date.