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

# Timezone Configuration - JavaScript Event calendar demo

Set independent data and display timezones in a Javascript event calendar — configure how events are stored and let users switch the visible timezone. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/eventcalendar/setting-the-timezone)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/calendar-view/setting-the-timezone)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/eventcalendar/setting-the-timezone.md), [Angular](https://demo.mobiscroll.com/angular/eventcalendar/setting-the-timezone.md), [React](https://demo.mobiscroll.com/react/eventcalendar/setting-the-timezone.md), [Vue](https://demo.mobiscroll.com/vue/eventcalendar/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/eventcalendar/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/eventcalendar/multiple-timezone-support)

## 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 over or selecting an event label highlights it and shows resize handles on both sides, indicating that the event can be resized by clicking and dragging.
- **Day interaction** Clicking a day cell selects the day and changes the day-number highlight to blue and if that contains events, opens a popover with the list of events for that date.
- **Creating events** Clicking and dragging across day cells creates a new event.
- **Day states** Hovering over a day cell highlights the day number in the top-right corner with a gray background.
- **Calendar header** 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 controls** A `Date timezone is:` label appears next to the month 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 month view based on the selected timezone.

## Best for

- **Global scheduling** Apps that need to show the same events for users in different countries or regions.
- **International events** Event platforms, conferences, and webinar calendars with attendees across multiple timezones.
- **Remote teams** Business calendars that need to present meetings and work schedules consistently for distributed teams.
- **Travel and cross-region planning** Tools where users need to compare dates and event times across locations.
- **Timezone-aware previews** Products that let users switch the visible calendar 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: { calendar: { 
        type: 'month',
        popover: true,
    }},
    data: [{
        start: '2026-10-26T07:00:00Z',
        end: '2026-10-26T09:00:00Z',
        title: 'Stakeholder mtg.',
        color: '#d64646'
    }, {
        start: '2026-10-29T18:00:00Z',
        end: '2026-10-29T19:30:00Z',
        title: 'Wrapup mtg.',
        color: '#ecbc72'
    }, {
        start: '2026-10-26T14:00:00Z',
        end: '2026-10-26T18:00:00Z',
        title: 'Business of Software Conference',
        color: '#ff6d42'
    }, {
        start: '2026-10-27T20:00:00Z',
        end: '2026-10-27T21:50:00Z',
        title: 'Product Team mtg.',
        color: '#913aa7'
    }, {
        start: '2026-10-25T13:00:00Z',
        end: '2026-10-25T15:00:00Z',
        title: 'Decision Making mtg.',
        color: '#46c3d6'
    }, {
        start: '2026-10-27T13:00:00Z',
        end: '2026-10-27T14:00:00Z',
        title: 'Quick mtg. with Martin',
        color: '#50b166'
    }, {
        start: '2026-10-29T12:00:00Z',
        end: '2026-10-29T16: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-showing-events-timezone', {
  timezonePlugin: mobiscroll.dayjsTimezone,
  dataTimezone: 'utc',
  displayTimezone: 'local',
  view: {
    calendar: {
      popover: true,
      type: 'month',
    },
  },
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  data: [
    {
      start: '2026-10-26T07:00',
      end: '2026-10-26T09:00',
      title: 'Stakeholder mtg.',
      color: '#d64646',
    },
    {
      start: '2026-10-29T18:00',
      end: '2026-10-29T19:30',
      title: 'Wrapup mtg.',
      color: '#ecbc72',
    },
    {
      start: '2026-10-26T14:00',
      end: '2026-10-26T18:00',
      title: 'Business of Software Conference',
      color: '#ff6d42',
    },
    {
      start: '2026-10-27T20:00',
      end: '2026-10-27T21:50',
      title: 'Product Team mtg.',
      color: '#913aa7',
    },
    {
      start: '2026-10-25T13:00',
      end: '2026-10-25T15:00',
      title: 'Decision Making mtg.',
      color: '#46c3d6',
    },
    {
      start: '2026-10-27T13:00',
      end: '2026-10-27T14:00',
      title: 'Quick mtg. with Martin',
      color: '#50b166',
    },
    {
      start: '2026-10-29T12:00',
      end: '2026-10-29T16:00',
      color: '#5bb7c5',
      title: 'Team-Building',
    },
  ],
});
```

### HTML

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

## Implementation notes

- Install a timezone library - this demo uses `dayjs` with `dayjs/plugin/utc` and `dayjs/plugin/timezone`. Import `dayjsTimezone` from the Mobiscroll package, call `dayjs.extend(utc)` and `dayjs.extend(timezone)`, then assign `dayjsTimezone.dayjs = dayjs`. Pass `timezonePlugin` to the `Eventcalendar` to activate timezone-aware date handling.
- Set `dataTimezone: 'utc'` so the calendar interprets all event dates as UTC, and `displayTimezone: 'local'` to convert and display them in the browser's local timezone.
- Set `view: { calendar: { popover: true, type: 'month' } }` for a month view where clicking a day cell opens a popover listing that day's events.
- To display events in a specific timezone at runtime, update `displayTimezone` to any IANA timezone string (e.g. `'America/New_York'`). To define source timezone per-event instead of globally, use the event's own `timezone` property instead of `dataTimezone`.

## 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: [Custom Event Sort Order](https://demo.mobiscroll.com/javascript/eventcalendar/custom-event-sort.md) - Control event display order in a Javascript event calendar — assign per-event priority values or supply a custom function to override the default ordering.
- Next: [Multiple Timezones](https://demo.mobiscroll.com/javascript/eventcalendar/multiple-timezone-support.md) - 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.