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;
myEvents = [{
start: '2026-11-14T07:00:00Z',
end: '2026-11-14T09:00:00Z',
title: 'Stakeholder mtg.',
resource: [1, 2, 4]
}, {
start: '2026-11-17T18:00:00Z',
end: '2026-11-17T19:30:00Z',
title: 'Wrapup mtg.',
resource: [2, 3, 5]
}, {
start: '2026-11-14T14:00:00Z',
end: '2026-11-14T18:00:00Z',
title: 'Business of Software Conference',
resource: [1, 3]
}, {
start: '2026-11-15T20:00:00Z',
end: '2026-11-15T21:50:00Z',
title: 'Product Team mtg.',
resource: [2, 3, 4]
}, {
start: '2026-11-13T13:00:00Z',
end: '2026-11-13T15:00:00Z',
title: 'Decision Making mtg.',
resource: [1, 4, 5]
}, {
start: '2026-11-15T13:00:00Z',
end: '2026-11-15T14:00:00Z',
title: 'Quick mtg. with Martin',
resource: 3
}, {
start: '2026-11-17T12:00:00Z',
end: '2026-11-17T16: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}
/>
}
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-14T07:00',
end: '2026-11-14T09:00',
title: 'Stakeholder mtg.',
resource: [1, 2, 4],
},
{
start: '2026-11-17T18:00',
end: '2026-11-17T19:30',
title: 'Wrapup mtg.',
resource: [2, 3, 5],
},
{
start: '2026-11-14T14:00',
end: '2026-11-14T18:00',
title: 'Business of Software Conference',
resource: [1, 3],
},
{
start: '2026-11-15T20:00',
end: '2026-11-15T21:50',
title: 'Product Team mtg.',
resource: [2, 3, 4],
},
{
start: '2026-11-13T13:00',
end: '2026-11-13T15:00',
title: 'Decision Making mtg.',
resource: [1, 4, 5],
},
{
start: '2026-11-15T13:00',
end: '2026-11-15T14:00',
title: 'Quick mtg. with Martin',
resource: 3,
},
{
start: '2026-11-17T12:00',
end: '2026-11-17T16: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;
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({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const myEvents = useMemo<MbscCalendarEvent[]>(
() => [
{
start: '2026-11-14T07:00',
end: '2026-11-14T09:00',
title: 'Stakeholder mtg.',
resource: [1, 2, 4],
},
{
start: '2026-11-17T18:00',
end: '2026-11-17T19:30',
title: 'Wrapup mtg.',
resource: [2, 3, 5],
},
{
start: '2026-11-14T14:00',
end: '2026-11-14T18:00',
title: 'Business of Software Conference',
resource: [1, 3],
},
{
start: '2026-11-15T20:00',
end: '2026-11-15T21:50',
title: 'Product Team mtg.',
resource: [2, 3, 4],
},
{
start: '2026-11-13T13:00',
end: '2026-11-13T15:00',
title: 'Decision Making mtg.',
resource: [1, 4, 5],
},
{
start: '2026-11-15T13:00',
end: '2026-11-15T14:00',
title: 'Quick mtg. with Martin',
resource: 3,
},
{
start: '2026-11-17T12:00',
end: '2026-11-17T16: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;