--- title: "React Calendar Timezone Configuration Example | Mobiscroll" component: "Calendar" framework: "React" library_version: "6.1.5" url: "https://demo.mobiscroll.com/react/calendar/setting-the-picker-timezone" --- # Timezone Configuration - React Calendar demo Configure data and display timezones in the React date picker — with Luxon, Day.js, or moment-timezone. For React and Next.JS. - [Live demo](https://demo.mobiscroll.com/react/calendar/setting-the-picker-timezone) - [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/datepicker/calendar/setting-the-picker-timezone) - [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/datepicker/calendar/setting-the-picker-timezone) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/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), [Vue](https://demo.mobiscroll.com/vue/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/react/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/react/calendar/disabled-invalid-values) as well as [marked, colored and labels](https://demo.mobiscroll.com/react/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" ```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() { const [selected, setSelected] = useState(null); const selectedChange = (ev) => { setSelected(ev.value); } return } ``` ## API used in this demo - [`theme`](https://mobiscroll.com/docs/react/datepicker/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/react/datepicker/api#opt-themeVariant) - option - [`controls`](https://mobiscroll.com/docs/react/datepicker/api#opt-controls) - option - [`onChange`](https://mobiscroll.com/docs/react/datepicker/api#event-onChange) - event - [`dataTimezone`](https://mobiscroll.com/docs/react/datepicker/api#opt-dataTimezone) - option - [`displayTimezone`](https://mobiscroll.com/docs/react/datepicker/api#opt-displayTimezone) - option - [`inputStyle`](https://mobiscroll.com/docs/react/datepicker/api#opt-inputStyle) - option - [`labelStyle`](https://mobiscroll.com/docs/react/datepicker/api#opt-labelStyle) - option - [`timezonePlugin`](https://mobiscroll.com/docs/react/datepicker/api#opt-timezonePlugin) - option ## Code ### JSX ```jsx import { Datepicker, dayjsTimezone, setOptions } from '@mobiscroll/react'; import dayjs from 'dayjs'; import timezone from 'dayjs/plugin/timezone'; import utc from 'dayjs/plugin/utc'; import { useCallback, useState } from 'react'; dayjs.extend(utc); dayjs.extend(timezone); dayjsTimezone.dayjs = dayjs; setOptions({ theme: 'ios', themeVariant: 'light' }); function App() { const [selected, setSelected] = useState(null); const handleChange = useCallback((ev) => { setSelected(ev.value); }, []); return ( ); } export default App; ``` ### TSX ```tsx import { Datepicker, dayjsTimezone, MbscDatepickerChangeEvent, setOptions } from '@mobiscroll/react'; import dayjs from 'dayjs'; import timezone from 'dayjs/plugin/timezone'; import utc from 'dayjs/plugin/utc'; import { FC, useCallback, useState } from 'react'; dayjs.extend(utc); dayjs.extend(timezone); dayjsTimezone.dayjs = dayjs; setOptions({ theme: 'ios', themeVariant: 'light' }); const App: FC = () => { const [selected, setSelected] = useState(null); const handleChange = useCallback((ev: MbscDatepickerChangeEvent) => { setSelected(ev.value as string); }, []); return ( ); }; export default App; ``` ## 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-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: [Programmatic Value Control](https://demo.mobiscroll.com/react/calendar/setting-values-defaults.md) - Set a default date or update the React date picker value programmatically — via bound state or custom buttons.