---
title: "Javascript Scheduler Multi-Timezone Configuration Example | Mobiscroll"
component: "Scheduler"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/scheduler/setting-the-timezone"
---

# Multi-Timezone Configuration - JavaScript Scheduler demo

Set separate data and display timezones in the Javascript Scheduler — let users switch visible timezones without changing event data. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/scheduler/setting-the-timezone)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/scheduler/setting-the-timezone)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/scheduler/setting-the-timezone.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/setting-the-timezone.md), [React](https://demo.mobiscroll.com/react/scheduler/setting-the-timezone.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/setting-the-timezone.md)

## Description

The event calendar works with local times by default, but ships with support for changing the timezone. The conversions and correct output relies on either of these three external libraries: [luxon](https://moment.github.io/luxon/), [moment-timezone](https://momentjs.com/timezone/) and [day.js](https://day.js.org/). For installing and using these libraries [check out this guide](https://mobiscroll.com/docs/javascript/eventcalendar/timezones#library-install).

There are two angles regarding timezones:

- `dataTimezone` - the calendar expects this format and returns this format. It is `'local'` by default if the date-times don't contain any timezone information.

It can be set globally on the calendar using the [`dataTimezone`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dataTimezone) option, or specifically for the event using the `timezone` property of the [event data](https://demo.mobiscroll.com/javascript/scheduler/event-data-structure).

- `displayTimezone` - the calendar displays the events in this timezone. The date-times will be converted from the `dataTimezone` and displayed accordingly. It is `'local'` by default

**Enable switching the timezone in the UI?** [Learn how to dynamically change timezones →](https://demo.mobiscroll.com/javascript/scheduler/multiple-timezone-support)

## What this demo shows

- A desktop weekly scheduler layout with a fixed week strip at the top, a fixed all-day row below it, and a scrollable scheduler time grid for the selected week.
- **Timezone controls** A `Date timezone is:` label appears next to the week view left uppder sied which shows the event data timezone as UTC in a non-editable input.
- **Display timezone selector** A `Display timezone is:` label appears below the data timezone field and is paired with a selectable input that opens a timezone picker.
- **Timezone conversion** Choosing a different display timezone updates the visible event times in the week view based on the selected timezone.
- **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.
- **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 to users in different countries or regions.
- **Remote teams** Business schedulers that need to display meetings and work schedules consistently for distributed teams.
- **Travel and cross-region planning** Tools where users compare dates and event times across locations.
- **Timezone-aware previews** Products that let users switch the visible scheduler timezone before confirming schedules.

## Tutorial

- Data timezone is `UTC` Display timezone is `UTC+0 - Local`

The local timezone your browser is in: "UTC"

```js
// Extend Day.js with UTC and timezone plugins
dayjs.extend(window.dayjs_plugin_utc);
dayjs.extend(window.dayjs_plugin_timezone);
// Setup Mobiscroll Day.js plugin
mobiscroll.dayjsTimezone.dayjs = dayjs;

mobiscroll.eventcalendar('#calendar', {
    dataTimezone: 'utc',
    displayTimezone: 'local',
    timezonePlugin: mobiscroll.dayjsTimezone,
    view: { scheduler: { type: 'week' } },
    data: [{
        start: '2026-10-23T07:00:00Z',
        end: '2026-10-23T09:00:00Z',
        title: 'Stakeholder mtg.',
        color: '#d64646'
    }, {
        start: '2026-10-26T18:00:00Z',
        end: '2026-10-26T19:30:00Z',
        title: 'Wrapup mtg.',
        color: '#ecbc72'
    }, {
        start: '2026-10-23T14:00:00Z',
        end: '2026-10-23T18:00:00Z',
        title: 'Business of Software Conference',
        color: '#ff6d42'
    }, {
        start: '2026-10-24T20:00:00Z',
        end: '2026-10-24T21:50:00Z',
        title: 'Product Team mtg.',
        color: '#913aa7'
    }, {
        start: '2026-10-22T13:00:00Z',
        end: '2026-10-22T15:00:00Z',
        title: 'Decision Making mtg.',
        color: '#46c3d6'
    }, {
        start: '2026-10-24T13:00:00Z',
        end: '2026-10-24T14:00:00Z',
        title: 'Quick mtg. with Martin',
        color: '#50b166'
    }, {
        start: '2026-10-26T12:00:00Z',
        end: '2026-10-26T16:00:00Z',
        color: '#5bb7c5',
        title: 'Team-Building'
    }],
});
```

## 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

## 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'
});

mobiscroll.eventcalendar('#demo-static-showing-events-timezone', {
  timezonePlugin: mobiscroll.dayjsTimezone,
  dataTimezone: 'utc',
  displayTimezone: 'local',
  view: {
    scheduler: { type: 'week' },
  },
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  data: [
    {
      start: '2026-10-23T07:00',
      end: '2026-10-23T09:00',
      title: 'Stakeholder mtg.',
      color: '#d64646',
    },
    {
      start: '2026-10-26T18:00',
      end: '2026-10-26T19: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-22T13:00',
      end: '2026-10-22T15:00',
      title: 'Decision Making mtg.',
      color: '#46c3d6',
    },
    {
      start: '2026-10-24T13:00',
      end: '2026-10-24T14:00',
      title: 'Quick mtg. with Martin',
      color: '#50b166',
    },
    {
      start: '2026-10-26T12:00',
      end: '2026-10-26T16:00',
      color: '#5bb7c5',
      title: 'Team-Building',
    },
  ],
});
```

### HTML

```html
<div id="demo-static-showing-events-timezone"></div>
```

## Implementation notes

- Register the Day.js timezone adapter: import `dayjs`, `dayjs/plugin/utc`, and `dayjs/plugin/timezone`; call `dayjs.extend(utc)` and `dayjs.extend(timezone)`; then assign `dayjsTimezone.dayjs = dayjs` (where `dayjsTimezone` is the Mobiscroll timezone adapter imported alongside the component). Luxon and moment-timezone are supported alternatives.
- Set `dataTimezone="utc"`, `displayTimezone="local"`, and `timezonePlugin={dayjsTimezone}` on the Eventcalendar. `dataTimezone` is the timezone events are stored and parsed in; `displayTimezone` is the timezone they are rendered in - the calendar converts between the two automatically. Both default to `'local'` if omitted.
- Use `view: { scheduler: { type: 'week' } }` with `dragToCreate`, `dragToMove`, and `dragToResize` all set to `true`.
- Define events as inline static data using `dyndatetime()` offsets for relative dates. Each event has `start`, `end`, `title`, and `color`.

## 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: [Visible hours and days](https://demo.mobiscroll.com/javascript/scheduler/show-hide-hours-days.md) - Keep your calendar focused. Trim your view. In Javascript, you can show only weekdays and business hours, making schedules cleaner and faster.
- Next: [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.