---
title: "Javascript Event calendar Multiple Timezones Example | Mobiscroll"
component: "Event calendar"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/eventcalendar/multiple-timezone-support"
---
# Multiple Timezones - JavaScript Event calendar demo
Show the same events in multiple timezones in a Javascript event calendar — add a header dropdown so users can switch their display timezone on the fly. Plain JS api for usage everywhere.
- [Live demo](https://demo.mobiscroll.com/javascript/eventcalendar/multiple-timezone-support)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/calendar-view/multiple-timezone-support)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/eventcalendar/multiple-timezone-support.md), [Angular](https://demo.mobiscroll.com/angular/eventcalendar/multiple-timezone-support.md), [React](https://demo.mobiscroll.com/react/eventcalendar/multiple-timezone-support.md), [Vue](https://demo.mobiscroll.com/vue/eventcalendar/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 monthly event calendar view where the same event data can be displayed in different timezones.
- **Month grid** Day cells display events as labels with a colored marker on the left, the event title, and the event start time at the end of the label.
- **Event interaction** Hovering or selecting an event highlights it and shows resize handles on both sides.
- **Event creation** Clicking and dragging on a day cell creates a new event.
- **Day hover state** Hovering over a day cell highlights the day number in the top-right corner with a gray background.
- **Day selection** Clicking the empty area of a day cell selects the day and highlights the day number with a blue background.
- **Header navigation** The header shows the current month and year on the left. On the right side, the previous and next arrow buttons for changing months, and a Today button for returning to the current date.
- **Timezone switcher** A custom dropdown in the right side of the header lets the user choose from different timezone options.
- **Timezone behavior** Changing the selected timezone updates the visible event times in the month view based on the selected timezone.
## 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 calendars 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 calendar display timezone on the fly from the calendar 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
- [`labels`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-labels) - 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: {
calendar: {
labels: true,
},
},
dragToCreate: true,
dragToMove: true,
dragToResize: true,
data: [
{
start: '2026-10-20T07:00',
end: '2026-10-20T09:00',
title: 'Stakeholder mtg.',
color: '#408cff',
},
{
start: '2026-10-21T18:00',
end: '2026-10-21T19:30',
title: 'Wrapup mtg.',
color: '#ecbc72',
},
{
start: '2026-10-22T14:00',
end: '2026-10-22T18:00',
title: 'Business of Software Conference',
color: '#ff6d42',
},
{
start: '2026-10-23T20:00',
end: '2026-10-23T21:50',
title: 'Product Team mtg.',
color: '#913aa7',
},
{
start: '2026-10-24T13:00',
end: '2026-10-24T15:00',
title: 'Decision Making mtg.',
color: '#5bb7c5',
},
{
start: '2026-10-25T13:00',
end: '2026-10-25T14:00',
title: 'Quick mtg. with Martin',
color: '#fd002f',
},
{
start: '2026-10-26T12:00',
end: '2026-10-26T16:00',
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
- Set up dayjs with `dayjs/plugin/utc` and `dayjs/plugin/timezone`, import `dayjsTimezone` from the Mobiscroll package, assign `dayjsTimezone.dayjs = dayjs`, and pass it to `timezonePlugin`.
- Set `dataTimezone: 'utc'` so the calendar treats all event dates as UTC. Bind `displayTimezone` to a state variable initialized to `'utc'`.
- Set `view: { calendar: { labels: true } }` to display a month grid with inline event labels.
- Enable `dragToCreate`, `dragToMove`, and `dragToResize` for interactive event management.
- Use `renderHeader` (Angular: `headerTemplate`, Vue: `#header` slot) to render a custom header: `CalendarNav` on the left; `CalendarPrev`, `CalendarToday`, `CalendarNext`, and a Mobiscroll `Select` component on the right. The `Select` lists 9 IANA timezone options (e.g. `'America/Los_Angeles'`, `'UTC'`, `'Europe/Berlin'`). On change, update the `displayTimezone` - the calendar re-renders all event labels in the newly selected timezone.
## 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: [Timezone Configuration](https://demo.mobiscroll.com/javascript/eventcalendar/setting-the-timezone.md) - Set independent data and display timezones in a Javascript event calendar — configure how events are stored and let users switch the visible timezone.
- Next: [Event Search Popup](https://demo.mobiscroll.com/javascript/eventcalendar/searching-events-in-popup.md) - Search events in real time from the Javascript event calendar header — results appear in an agenda-style popup as you type, grouped by date.