---
title: "React Timeline Data & Display Timezone Example | Mobiscroll"
component: "Timeline"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/timeline/setting-the-timezone"
---

# Data & Display Timezone - React Timeline demo

Set separate data and display timezones on a React Timeline — configure per-resource event timezone display using Luxon, Moment-timezone, or Day.js. For React and Next.JS.

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

## What this demo shows

- A desktop weekly timeline where days are arranged horizontally and resources are listed as rows on the left.
- **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 opens date navigation, while the previous and next arrows move between weeks and the Today button returns to the current date.
- **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 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"

```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;

myEvents = [{
    start: '2026-10-25T07:00:00Z',
    end: '2026-10-25T09:00:00Z',
    title: 'Stakeholder mtg.',
    resource: [1, 2, 4]
}, {
    start: '2026-10-28T18:00:00Z',
    end: '2026-10-28T19:30:00Z',
    title: 'Wrapup mtg.',
    resource: [2, 3, 5]
}, {
    start: '2026-10-25T14:00:00Z',
    end: '2026-10-25T18:00:00Z',
    title: 'Business of Software Conference',
    resource: [1, 3]
}, {
    start: '2026-10-26T20:00:00Z',
    end: '2026-10-26T21:50:00Z',
    title: 'Product Team mtg.',
    resource: [2, 3, 4]
}, {
    start: '2026-10-24T13:00:00Z',
    end: '2026-10-24T15:00:00Z',
    title: 'Decision Making mtg.',
    resource: [1, 4, 5]
}, {
    start: '2026-10-26T13:00:00Z',
    end: '2026-10-26T14:00:00Z',
    title: 'Quick mtg. with Martin',
    resource: 3
}, {
    start: '2026-10-28T12:00:00Z',
    end: '2026-10-28T16:00:00Z',
    title: 'Team-Building',
    resource: [1, 2, 3, 4, 5]
}];

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

## 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
- [`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
- [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option
- [`resources`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-resources) - option
- [`dragToCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToResize) - 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-25T07:00',
        end: '2026-10-25T09:00',
        title: 'Stakeholder mtg.',
        resource: [1, 2, 4],
      },
      {
        start: '2026-10-28T18:00',
        end: '2026-10-28T19:30',
        title: 'Wrapup mtg.',
        resource: [2, 3, 5],
      },
      {
        start: '2026-10-25T14:00',
        end: '2026-10-25T18:00',
        title: 'Business of Software Conference',
        resource: [1, 3],
      },
      {
        start: '2026-10-26T20:00',
        end: '2026-10-26T21:50',
        title: 'Product Team mtg.',
        resource: [2, 3, 4],
      },
      {
        start: '2026-10-24T13:00',
        end: '2026-10-24T15:00',
        title: 'Decision Making mtg.',
        resource: [1, 4, 5],
      },
      {
        start: '2026-10-26T13:00',
        end: '2026-10-26T14:00',
        title: 'Quick mtg. with Martin',
        resource: 3,
      },
      {
        start: '2026-10-28T12:00',
        end: '2026-10-28T16:00',
        title: 'Team-Building',
        resource: [1, 2, 3, 4, 5],
      },
    ],
    [],
  );

  const myResources = useMemo(
    () => [
      {
        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',
      },
    ],
    [],
  );

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

  return (
    <Eventcalendar
      dataTimezone="utc"
      displayTimezone="local"
      timezonePlugin={dayjsTimezone}
      data={myEvents}
      view={myView}
      resources={myResources}
      dragToCreate={true}
      dragToMove={true}
      dragToResize={true}
    />
  );
}

export default App;
```

### TSX

```tsx
import {
  dayjsTimezone,
  Eventcalendar,
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscResource,
  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-25T07:00',
        end: '2026-10-25T09:00',
        title: 'Stakeholder mtg.',
        resource: [1, 2, 4],
      },
      {
        start: '2026-10-28T18:00',
        end: '2026-10-28T19:30',
        title: 'Wrapup mtg.',
        resource: [2, 3, 5],
      },
      {
        start: '2026-10-25T14:00',
        end: '2026-10-25T18:00',
        title: 'Business of Software Conference',
        resource: [1, 3],
      },
      {
        start: '2026-10-26T20:00',
        end: '2026-10-26T21:50',
        title: 'Product Team mtg.',
        resource: [2, 3, 4],
      },
      {
        start: '2026-10-24T13:00',
        end: '2026-10-24T15:00',
        title: 'Decision Making mtg.',
        resource: [1, 4, 5],
      },
      {
        start: '2026-10-26T13:00',
        end: '2026-10-26T14:00',
        title: 'Quick mtg. with Martin',
        resource: 3,
      },
      {
        start: '2026-10-28T12:00',
        end: '2026-10-28T16:00',
        title: 'Team-Building',
        resource: [1, 2, 3, 4, 5],
      },
    ],
    [],
  );

  const myResources = useMemo<MbscResource[]>(
    () => [
      {
        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',
      },
    ],
    [],
  );

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

  return (
    <Eventcalendar
      dataTimezone="utc"
      displayTimezone="local"
      timezonePlugin={dayjsTimezone}
      data={myEvents}
      view={myView}
      resources={myResources}
      dragToCreate={true}
      dragToMove={true}
      dragToResize={true}
    />
  );
};
export default App;
```

## Implementation notes

- Install `dayjs` and its `utc` and `timezone` plugins. At the top of the component file, extend dayjs with both plugins and wire the dayjs instance to Mobiscroll's adapter:
  ```js
  import dayjs from 'dayjs'
  import utc from 'dayjs/plugin/utc'
  import timezone from 'dayjs/plugin/timezone'
  import { dayjsTimezone } from '@mobiscroll/react' // or vue / angular / javascript / jquery

  dayjs.extend(utc)
  dayjs.extend(timezone)
  dayjsTimezone.dayjs = dayjs
  ```
  The `dayjsTimezone.dayjs = dayjs` assignment is required - Mobiscroll does not bundle dayjs itself and needs this reference. Luxon and moment-timezone are also supported as alternatives; only the adapter import name changes.
- Set `dataTimezone="utc"`, `displayTimezone="local"`, and `timezonePlugin={dayjsTimezone}` on the `Eventcalendar`. `dataTimezone` tells Mobiscroll how to interpret event start/end strings; `displayTimezone` controls what the user sees. With `'utc'` + `'local'`, events stored in UTC are shifted to the visitor's local offset for display.
- Use `timeline: { type: 'week' }` - no special view config beyond the week type is needed for this demo.
- Define 5 generic resources (A-E) with `id`, `name`, and `color`.
- Add 7 meeting events with `dyndatetime` offsets (today-1 to today+3). Several events span multiple resources using `resource: [1, 2, 4]` (array of IDs), demonstrating that timezone handling applies equally to single-resource and multi-resource events.
- Enable `dragToCreate`, `dragToMove`, and `dragToResize` so users can interactively create and adjust events and observe how the timezone conversion applies to newly created event times.

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

On a trial, add `--trial` to the config command: `mobiscroll config react --trial`.

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: [Day/Week View Switcher](https://demo.mobiscroll.com/react/timeline/switching-day-week-work-week-timeline.md) - Build resource schedules with day, work-week, and full-week views on a React Timeline — switch views from the header to control time-grid detail.
- Next: [Multiple Timezone Support](https://demo.mobiscroll.com/react/timeline/multiple-timezone-support.md) - Add a timezone-switcher dropdown to React Timeline header — users change display timezone on the fly, with data timezones configured independently.