---
title: "Vue Calendar Timezone Configuration Example | Mobiscroll"
component: "Calendar"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/calendar/setting-the-picker-timezone"
---

# Timezone Configuration - Vue Calendar demo

Configure data and display timezones in the Vue date picker — with Luxon, Day.js, or moment-timezone. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/calendar/setting-the-picker-timezone)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/datepicker/calendar/setting-the-picker-timezone)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/datepicker/calendar/setting-the-picker-timezone)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/calendar/setting-the-picker-timezone.md), [jQuery](https://demo.mobiscroll.com/jquery/calendar/setting-the-picker-timezone.md), [Angular](https://demo.mobiscroll.com/angular/calendar/setting-the-picker-timezone.md), [React](https://demo.mobiscroll.com/react/calendar/setting-the-picker-timezone.md)

## Description

The 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/vue/datepicker/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
- `displayTimezone` - the calendar displays everything in this timezone. The date-times will be converted from the `dataTimezone` and displayed accordingly. It is `'local'` by default

[Invalids](https://demo.mobiscroll.com/vue/calendar/disabled-invalid-values) as well as [marked, colored and labels](https://demo.mobiscroll.com/vue/calendar/dots-colors-labels) date-times will all be interpreted in `dataTimezone` when they contain no timezone info and will be shown in `displayTimezone` on the calendar.

## What this demo shows

- Configure the timezone used for date and time selection and display.
- **Header navigation** Open the month and year picker from the label in the upper-left corner, or use the previous and next arrow buttons on the right to navigate between months.
- **Month view** View abbreviated weekday names from Sunday through Saturday in a fixed header, with dates arranged in a grid below.
- **Month navigation** Click and drag the calendar left or right to move between months.
- **Day cell states** Hover over a date to highlight its day number with a gray background, or select a date to highlight it in blue. The current date is highlighted by default and remains blue when another date is selected.
- **Adjacent months** View dates from the previous and next months in a muted style. Selecting one navigates to the corresponding month.
- **Scroller time picker** Select an exact time from the scroller next to the single-month calendar. Its three columns contain hours from 1 to 12, minutes from 0 to 59, and AM/PM options.
- **Data timezone** View the calendar's data timezone, shown as UTC in a non-editable field labeled `Date timezone is:` next to the calendar on the left.
- **Display timezone** Use the selectable field labeled `Display timezone is:` below the data timezone field to open a timezone picker.
- **Timezone conversion** Select a different display timezone to update the date and time shown by the picker.

## Best for

- **Travel booking** Let users choose dates and times in the timezone of a flight, hotel, rental, or destination.
- **Remote appointments** Display appointment times in each participant's local timezone while keeping the underlying date-time values in a consistent data timezone.
- **International scheduling** Support date and time selection for meetings, interviews, or services involving users in different regions.
- **Location-based services** Show reservation, pickup, delivery, or check-in times in the timezone of the selected location.
- **UTC-based systems** Store and return date-time values in UTC while presenting them in a user-selected display timezone.

## Tutorial

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

The local timezone your browser is in: "UTC"

```vue
<script setup>
import { dayjsTimezone } from '@mobiscroll/vue';
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;

const selected = ref()
</script>

<template>
  <MbscDatepicker
    dataTimezone="utc"
    displayTimezone="local"
    :controls="['calendar', 'time']"
    :timezonePlugin="dayjsTimezone"
    v-model="selected"
  >
  </MbscDatepicker>
</template>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/vue/datepicker/api#opt-controls) - option
- [`timezonePlugin`](https://mobiscroll.com/docs/vue/datepicker/api#opt-timezonePlugin) - option
- [`dataTimezone`](https://mobiscroll.com/docs/vue/datepicker/api#opt-dataTimezone) - option
- [`displayTimezone`](https://mobiscroll.com/docs/vue/datepicker/api#opt-displayTimezone) - option
- [`inputStyle`](https://mobiscroll.com/docs/vue/datepicker/api#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/vue/datepicker/api#opt-labelStyle) - option

## Code

### SFC JS

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

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

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

const selected = ref()
</script>

<template>
  <MbscDatepicker
    :controls="['calendar', 'time']"
    :timezonePlugin="dayjsTimezone"
    v-model="selected"
    dataTimezone="utc"
    displayTimezone="local"
    label="Select Date & Time in Display Timezone"
    inputStyle="outline"
    labelStyle="stacked"
  />
  <div class="mbsc-padding">
    <p v-if="selected">
      Selected date is returned in Data Timezone<br />
      <code>{{ selected }}</code>
    </p>
  </div>
</template>
```

### SFC TS

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

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

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

const selected = ref<any>(null)
</script>

<template>
  <MbscDatepicker
    :controls="['calendar', 'time']"
    :timezonePlugin="dayjsTimezone"
    v-model="selected"
    dataTimezone="utc"
    displayTimezone="local"
    label="Select Date & Time in Display Timezone"
    inputStyle="outline"
    labelStyle="stacked"
  />
  <div class="mbsc-padding">
    <p v-if="selected">
      Selected date is returned in Data Timezone<br />
      <code>{{ selected }}</code>
    </p>
  </div>
</template>
```

## Implementation notes

- Load Day.js with its `utc` and `timezone` plugins, call `dayjs.extend(utc)` and `dayjs.extend(timezone)`, then set `dayjsTimezone.dayjs = dayjs` before initializing the picker. In React/Angular/Vue, `dayjsTimezone` is imported directly from the framework package (e.g. `@mobiscroll/react`); in JS/jQuery it's `mobiscroll.dayjsTimezone`, referencing the plugins via `window.dayjs_plugin_utc`/`window.dayjs_plugin_timezone`.
- Use `controls: ['calendar', 'time']` with `timezonePlugin` set to that `dayjsTimezone` object (`timezonePlugin={dayjsTimezone}` in React/Vue, `[timezonePlugin]="myTimezonePlugin"` in Angular, `timezonePlugin: mobiscroll.dayjsTimezone` in JS/jQuery), plus `dataTimezone` (the timezone the underlying value is stored/returned in, e.g. `'utc'`) and `displayTimezone` (the timezone the picker UI shows dates/times in, e.g. `'local'` or an IANA zone string like `'America/New_York'`).
- `dataTimezone` stays fixed for the app's storage contract while `displayTimezone` can be changed per user/session.
- Read the underlying (data-timezone) value from the change event: React binds `value`/`onChange` and reads `ev.value`; Angular/Vue bind via `[(ngModel)]`/`v-model`; JS/jQuery call `inst.getVal()` inside the `onChange` callback. The picker handles the conversion between the data and display timezones transparently.

## 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: [Programmatic Value Control](https://demo.mobiscroll.com/vue/calendar/setting-values-defaults.md) - Set a default date or update the Vue date picker value programmatically — via bound state or custom buttons.