---
title: "Vue Scheduler Multi-Timezone Example | Mobiscroll"
component: "Scheduler"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/scheduler/show-multiple-timezones"
---

# Multi-Timezone - Vue Scheduler demo

Show multiple timezone panels side by side in the Vue Scheduler — set custom labels per track and compare event times across regions. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/scheduler/show-multiple-timezones)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/eventcalendar/scheduler/show-multiple-timezones)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/eventcalendar/scheduler/show-multiple-timezones)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/show-multiple-timezones.md), [jQuery](https://demo.mobiscroll.com/jquery/scheduler/show-multiple-timezones.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/show-multiple-timezones.md), [React](https://demo.mobiscroll.com/react/scheduler/show-multiple-timezones.md)

## Description

When operating across multiple timezones, coordinating resources and getting people on the same page is a challenge. It helps if events can be seen across these timezones.

Use the `timezones` property of the [`view.scheduler`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) option and set the timezone tracks with custom labels. The order of the tracks is determined by the order they are added to the array.

## 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.
- **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.
- **Time zone panel** The scheduler displayes multiple timezones simultaneously through a dedicated timezone panel on the left side. Each timezone is shown in its own column, allowing users to instantly compare local times across different regions.
- **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 organizations**: Coordinating schedules across multiple office locations, regions, or operating timezones.
- **Remote teams**: Comparing local times when planning meetings, handoffs, or collaborative work across distributed teams.
- **Cross-region scheduling**: Showing timed events against several timezone tracks without requiring users to calculate time differences manually.
- **Business operations**: Managing schedules for teams or resources that regularly work across geographic regions.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-themeVariant) - option
- [`clickToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-eventDelete) - option
- [`dataTimezone`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dataTimezone) - option
- [`displayTimezone`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-displayTimezone) - option
- [`timezonePlugin`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-timezonePlugin) - option
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option

## Code

### SFC JS

```vue
<script setup>
import { dayjsTimezone, MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import dayjs from 'dayjs'
import timezone from 'dayjs/plugin/timezone'
import utc from 'dayjs/plugin/utc'

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

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

const myEvents = [
  {
    start: '2026-10-22T07:00',
    end: '2026-10-22T09:00',
    title: 'Stakeholder mtg.',
    color: '#408cff'
  },
  {
    start: '2026-10-23T18:00',
    end: '2026-10-23T19:30',
    title: 'Wrapup mtg.',
    color: '#ecbc72'
  },
  {
    start: '2026-10-24T14:00',
    end: '2026-10-24T18:00',
    title: 'Business of Software Conference',
    color: '#ff6d42'
  },
  {
    start: '2026-10-25T20:00',
    end: '2026-10-25T21:50',
    title: 'Product Team mtg.',
    color: '#913aa7'
  },
  {
    start: '2026-10-26T13:00',
    end: '2026-10-26T15:00',
    title: 'Decision Making mtg.',
    color: '#5bb7c5'
  },
  {
    start: '2026-10-27T13:00',
    end: '2026-10-27T14:00',
    title: 'Quick mtg. with Martin',
    color: '#fd002f'
  },
  {
    start: '2026-10-28T12:00',
    end: '2026-10-28T16:00',
    color: '#50b166',
    title: 'Team-Building'
  }
]

const myView = {
  scheduler: {
    type: 'week',
    timezones: [
      {
        timezone: 'America/Los_Angeles',
        label: 'LA (-3)'
      },
      {
        timezone: 'America/Chicago',
        label: 'CHI (-1)'
      },
      {
        timezone: 'America/New_York',
        label: 'PHI'
      }
    ]
  }
}
</script>

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true"
    dataTimezone="utc"
    displayTimezone="America/New_York"
    :timezonePlugin="dayjsTimezone"
    :view="myView"
    :data="myEvents"
  />
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { dayjsTimezone, MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView } from '@mobiscroll/vue'
import dayjs from 'dayjs'
import timezone from 'dayjs/plugin/timezone'
import utc from 'dayjs/plugin/utc'

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

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

const myEvents: MbscCalendarEvent[] = [
  {
    start: '2026-10-22T07:00',
    end: '2026-10-22T09:00',
    title: 'Stakeholder mtg.',
    color: '#408cff'
  },
  {
    start: '2026-10-23T18:00',
    end: '2026-10-23T19:30',
    title: 'Wrapup mtg.',
    color: '#ecbc72'
  },
  {
    start: '2026-10-24T14:00',
    end: '2026-10-24T18:00',
    title: 'Business of Software Conference',
    color: '#ff6d42'
  },
  {
    start: '2026-10-25T20:00',
    end: '2026-10-25T21:50',
    title: 'Product Team mtg.',
    color: '#913aa7'
  },
  {
    start: '2026-10-26T13:00',
    end: '2026-10-26T15:00',
    title: 'Decision Making mtg.',
    color: '#5bb7c5'
  },
  {
    start: '2026-10-27T13:00',
    end: '2026-10-27T14:00',
    title: 'Quick mtg. with Martin',
    color: '#fd002f'
  },
  {
    start: '2026-10-28T12:00',
    end: '2026-10-28T16:00',
    color: '#50b166',
    title: 'Team-Building'
  }
]

const myView: MbscEventcalendarView = {
  scheduler: {
    type: 'week',
    timezones: [
      {
        timezone: 'America/Los_Angeles',
        label: 'LA (-3)'
      },
      {
        timezone: 'America/Chicago',
        label: 'CHI (-1)'
      },
      {
        timezone: 'America/New_York',
        label: 'PHI'
      }
    ]
  }
}
</script>

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true"
    dataTimezone="utc"
    displayTimezone="America/New_York"
    :timezonePlugin="dayjsTimezone"
    :view="myView"
    :data="myEvents"
  />
</template>
```

## Implementation notes

- Use `view: { scheduler: { type: 'week', timezones: [...] } }`. Pass `dataTimezone: 'utc'`, `displayTimezone: 'America/New_York'`, and `timezonePlugin: dayjsTimezone` to the Eventcalendar.
- **Timezone plugin setup**: import `dayjsTimezone` from the Mobiscroll package; import `dayjs` and its `utc` and `timezone` plugins; call `dayjs.extend(utc)` and `dayjs.extend(timezone)`; then set `dayjsTimezone.dayjs = dayjs`. JS/jQuery: assign via `mobiscroll.dayjsTimezone.dayjs = dayjs`.
- **`timezones` array** (three entries, order determines display order in the header): `{ timezone: 'America/Los_Angeles', label: 'LA (-3)' }`, `{ timezone: 'America/Chicago', label: 'CHI (-1)' }`, `{ timezone: 'America/New_York', label: 'PHI' }`.
- Define 7 events inline using `dyndatetime` offsets (spread across day-2 through day+4), each with `title` and `color`. No drag interactions.

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

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 vue --trial`.

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

## Related demos

- Previous: [Custom Event Order](https://demo.mobiscroll.com/vue/scheduler/custom-event-sort.md) - Control the event display order in a Vue Scheduler — set per-event priorities or a custom sort function to override the default ordering rules.
- Next: [Event Search Sidebar](https://demo.mobiscroll.com/vue/scheduler/searching-events-in-sidebar.md) - Add a real-time event search sidebar to the Vue Scheduler — filter events as you type, with matching results grouped by date in an inline agenda list.