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, moment-timezone and day.js. For installing and using these libraries check out this guide.
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 thedataTimezoneoption, or specifically for the event using thetimezoneproperty of the event data.displayTimezone- the calendar displays the events in this timezone. The date-times will be converted from thedataTimezoneand displayed accordingly. It is'local'by default
Enable switching the timezone in the UI? Learn how to dynamically change timezones →
Demo
Data timezone is:
Display timezone is:
The local timezone your browser is in:
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' }}}
/>
}
JSXTSX
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({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const myEvents = useMemo(
() => [
{
start: '2026-11-09T07:00',
end: '2026-11-09T09:00',
title: 'Stakeholder mtg.',
color: '#d64646',
},
{
start: '2026-11-12T18:00',
end: '2026-11-12T19:30',
title: 'Wrapup mtg.',
color: '#ecbc72',
},
{
start: '2026-11-09T14:00',
end: '2026-11-09T18:00',
title: 'Business of Software Conference',
color: '#ff6d42',
},
{
start: '2026-11-10T20:00',
end: '2026-11-10T21:50',
title: 'Product Team mtg.',
color: '#913aa7',
},
{
start: '2026-11-08T13:00',
end: '2026-11-08T15:00',
title: 'Decision Making mtg.',
color: '#46c3d6',
},
{
start: '2026-11-10T13:00',
end: '2026-11-10T14:00',
title: 'Quick mtg. with Martin',
color: '#50b166',
},
{
start: '2026-11-12T12:00',
end: '2026-11-12T16: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;
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({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const myEvents = useMemo<MbscCalendarEvent[]>(
() => [
{
start: '2026-11-09T07:00',
end: '2026-11-09T09:00',
title: 'Stakeholder mtg.',
color: '#d64646',
},
{
start: '2026-11-12T18:00',
end: '2026-11-12T19:30',
title: 'Wrapup mtg.',
color: '#ecbc72',
},
{
start: '2026-11-09T14:00',
end: '2026-11-09T18:00',
title: 'Business of Software Conference',
color: '#ff6d42',
},
{
start: '2026-11-10T20:00',
end: '2026-11-10T21:50',
title: 'Product Team mtg.',
color: '#913aa7',
},
{
start: '2026-11-08T13:00',
end: '2026-11-08T15:00',
title: 'Decision Making mtg.',
color: '#46c3d6',
},
{
start: '2026-11-10T13:00',
end: '2026-11-10T14:00',
title: 'Quick mtg. with Martin',
color: '#50b166',
},
{
start: '2026-11-12T12:00',
end: '2026-11-12T16: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;