---
title: "React Agenda Multi-Timezone Display Example | Mobiscroll"
component: "Agenda"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/agenda/setting-the-timezone"
---

# Multi-Timezone Display - React Agenda demo

Show React Agenda events in any timezone — configure data and display timezones, then add a UI timezone picker to let users switch views. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/agenda/setting-the-timezone)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/agenda/setting-the-timezone)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/eventcalendar/agenda/setting-the-timezone)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/agenda/setting-the-timezone.md), [jQuery](https://demo.mobiscroll.com/jquery/agenda/setting-the-timezone.md), [Angular](https://demo.mobiscroll.com/angular/agenda/setting-the-timezone.md), [Vue](https://demo.mobiscroll.com/vue/agenda/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/react/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/react/eventcalendar/api#opt-dataTimezone) option, or specifically for the event using the `timezone` property of the [event data](https://demo.mobiscroll.com/react/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/react/eventcalendar/multiple-timezone-support)

## What this demo shows

- A weekly agenda whose events are stored in UTC and listed in the browser's local timezone.
- **Timezone panel** A gray panel above the agenda, part of the demo page rather than the Eventcalendar, shows the timezones in use. `Data timezone is:` shows `UTC`, the timezone the event data is stored in.
- **Display timezone** `Display timezone is:` is a dropdown showing the timezone the agenda lists events in, set to the browser's local offset (for example, `UTC+2 Local`).
- **Browser timezone** The last line of the panel names the browser's timezone, for example `The local timezone your browser is in: "Europe/Berlin"`.
- **Header** The header shows the displayed week, Sunday to Saturday, as a date range on the left (for example, `Oct 11, 2026 - Oct 17, 2026`). On the right, previous and next arrows move between weeks, and a `Today` button returns to the current week.
- **Day headers** Events are grouped under a header for each day, such as `12 Mon Oct 2026`.
- **Empty days** Days without events get no header and are left out of the list.
- **Events** Each event is a row with a colored bar on the left and the event title in bold. The start time is on the right, with the end time below it in lighter text.
- **Event order** Events within a day are listed by start time.
- **Timezone conversion** Event times are shifted from UTC to the display timezone. With the browser in UTC+2, an event stored as 07:00 to 09:00 UTC is listed from 9:00 AM to 11:00 AM.

## Best for

- **Global scheduling** Apps that need to show the same events to users in different countries or regions.
- **International events** Event, conference, and webinar platforms that list sessions for attendees across multiple timezones.
- **Remote teams** Weekly meeting lists that show distributed team members the same schedule in their own local time.
- **Travel and cross-region planning** Itineraries and trip plans where users compare dates and event times across locations.
- **Timezone-aware previews** Products that let users switch the agenda's display timezone before confirming schedules.

## Tutorial

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

The local timezone your browser is in: "UTC"

```jsx
import { dayjsTimezone } from '@mobiscroll/react';
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';

// Extend Day.js with UTC and timezone plugins
dayjs.extend(utc);
dayjs.extend(timezone);
// Setup Mobiscroll Day.js plugin
dayjsTimezone.dayjs = dayjs;

function App() {
    return <Eventcalendar
        dataTimezone='utc'
        displayTimezone='local'
        timezonePlugin={dayjsTimezone}
        view={{ agenda: { type: 'week' }}}
    />
}
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-themeVariant) - option
- [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option
- [`dataTimezone`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dataTimezone) - option
- [`displayTimezone`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-displayTimezone) - option
- [`timezonePlugin`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-timezonePlugin) - option
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option

## Code

### JSX

```jsx
import { dayjsTimezone, Eventcalendar, setOptions } from '@mobiscroll/react';
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
import { useMemo } from 'react';

dayjs.extend(utc);
dayjs.extend(timezone);
dayjsTimezone.dayjs = dayjs;

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  const myEvents = useMemo(
    () => [
      {
        start: '2026-10-20T07:00',
        end: '2026-10-20T09:00',
        title: 'Stakeholder mtg.',
        color: '#d64646',
      },
      {
        start: '2026-10-23T18:00',
        end: '2026-10-23T19:30',
        title: 'Wrapup mtg.',
        color: '#ecbc72',
      },
      {
        start: '2026-10-20T14:00',
        end: '2026-10-20T18:00',
        title: 'Business of Software Conference',
        color: '#ff6d42',
      },
      {
        start: '2026-10-21T20:00',
        end: '2026-10-21T21:50',
        title: 'Product Team mtg.',
        color: '#913aa7',
      },
      {
        start: '2026-10-19T13:00',
        end: '2026-10-19T15:00',
        title: 'Decision Making mtg.',
        color: '#46c3d6',
      },
      {
        start: '2026-10-21T13:00',
        end: '2026-10-21T14:00',
        title: 'Quick mtg. with Martin',
        color: '#50b166',
      },
      {
        start: '2026-10-23T12:00',
        end: '2026-10-23T16:00',
        color: '#5bb7c5',
        title: 'Team-Building',
      },
    ],
    [],
  );

  const myView = useMemo(() => ({ agenda: { type: 'week' } }), []);

  return <Eventcalendar data={myEvents} dataTimezone="utc" displayTimezone="local" timezonePlugin={dayjsTimezone} view={myView} />;
}

export default App;
```

### TSX

```tsx
import { dayjsTimezone, Eventcalendar, MbscCalendarEvent, MbscEventcalendarView, setOptions } from '@mobiscroll/react';
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
import { FC, useMemo } from 'react';

dayjs.extend(utc);
dayjs.extend(timezone);
dayjsTimezone.dayjs = dayjs;

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const App: FC = () => {
  const myEvents = useMemo<MbscCalendarEvent[]>(
    () => [
      {
        start: '2026-10-20T07:00',
        end: '2026-10-20T09:00',
        title: 'Stakeholder mtg.',
        color: '#d64646',
      },
      {
        start: '2026-10-23T18:00',
        end: '2026-10-23T19:30',
        title: 'Wrapup mtg.',
        color: '#ecbc72',
      },
      {
        start: '2026-10-20T14:00',
        end: '2026-10-20T18:00',
        title: 'Business of Software Conference',
        color: '#ff6d42',
      },
      {
        start: '2026-10-21T20:00',
        end: '2026-10-21T21:50',
        title: 'Product Team mtg.',
        color: '#913aa7',
      },
      {
        start: '2026-10-19T13:00',
        end: '2026-10-19T15:00',
        title: 'Decision Making mtg.',
        color: '#46c3d6',
      },
      {
        start: '2026-10-21T13:00',
        end: '2026-10-21T14:00',
        title: 'Quick mtg. with Martin',
        color: '#50b166',
      },
      {
        start: '2026-10-23T12:00',
        end: '2026-10-23T16:00',
        color: '#5bb7c5',
        title: 'Team-Building',
      },
    ],
    [],
  );

  const myView = useMemo<MbscEventcalendarView>(() => ({ agenda: { type: 'week' } }), []);

  return <Eventcalendar data={myEvents} dataTimezone="utc" displayTimezone="local" timezonePlugin={dayjsTimezone} view={myView} />;
};
export default App;
```

## Implementation notes

- Any `dataTimezone` or `displayTimezone` value other than `'local'` needs a timezone plugin. This demo uses `dayjs` with `dayjs/plugin/utc` and `dayjs/plugin/timezone`: call `dayjs.extend(utc)` and `dayjs.extend(timezone)`, import `dayjsTimezone` from the Mobiscroll package, assign `dayjsTimezone.dayjs = dayjs`, and pass `dayjsTimezone` to the `timezonePlugin` option. With Luxon or moment-timezone, use the `luxonTimezone` or `momentTimezone` adapter instead.
- Set `dataTimezone: 'utc'` so the Eventcalendar reads event dates as UTC, and `displayTimezone: 'local'` to convert and list them in the browser's local timezone. The demo's `start` and `end` values are ISO 8601 strings without an offset (for example, `'2026-10-12T07:00'`). A string that includes an offset, such as `'2021-03-28T01:00:00Z'`, is read in that offset instead of `dataTimezone`.
- Set `view: { agenda: { type: 'week' } }` for a weekly agenda that lists the displayed week's events grouped by day. Days without events are left out unless `showEmptyDays: true` is added to the agenda view options.
- To display events in a specific timezone at runtime, update `displayTimezone` to an IANA timezone name (for example, `'America/New_York'`). To set the 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-react.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 react
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Previous: [Custom Event Sort](https://demo.mobiscroll.com/react/agenda/custom-event-sort.md) - Control the display order of events in a React agenda view — set per-event priority or use a custom sort function. For React and Next.JS.
- Next: [Event Search](https://demo.mobiscroll.com/react/agenda/searching-events-in-popup.md) - Add real-time event search to the React calendar header — type to filter events and show matching results in a popup agenda list. For React and Next.JS.