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:
// Extend Day.js with UTC and timezone plugins
dayjs.extend(window.dayjs_plugin_utc);
dayjs.extend(window.dayjs_plugin_timezone);
// Setup Mobiscroll Day.js plugin
mobiscroll.dayjsTimezone.dayjs = dayjs;
mobiscroll.eventcalendar('#calendar', {
dataTimezone: 'utc',
displayTimezone: 'local ',
timezonePlugin: mobiscroll.dayjsTimezone,
view: { timeline: { type: 'week' }},
data: [{
start: '2026-11-07T07:00:00Z',
end: '2026-11-07T09:00:00Z',
title: 'Stakeholder mtg.',
resource: [1, 2, 4]
}, {
start: '2026-11-10T18:00:00Z',
end: '2026-11-10T19:30:00Z',
title: 'Wrapup mtg.',
resource: [2, 3, 5]
}, {
start: '2026-11-07T14:00:00Z',
end: '2026-11-07T18:00:00Z',
title: 'Business of Software Conference',
resource: [1, 3]
}, {
start: '2026-11-08T20:00:00Z',
end: '2026-11-08T21:50:00Z',
title: 'Product Team mtg.',
resource: [2, 3, 4]
}, {
start: '2026-11-06T13:00:00Z',
end: '2026-11-06T15:00:00Z',
title: 'Decision Making mtg.',
resource: [1, 4, 5]
}, {
start: '2026-11-08T13:00:00Z',
end: '2026-11-08T14:00:00Z',
title: 'Quick mtg. with Martin',
resource: 3
}, {
start: '2026-11-10T12:00:00Z',
end: '2026-11-10T16:00:00Z',
title: 'Team-Building',
resource: [1, 2, 3, 4, 5]
}],
});
JSHTML
dayjs.extend(window.dayjs_plugin_utc);
dayjs.extend(window.dayjs_plugin_timezone);
mobiscroll.dayjsTimezone.dayjs = dayjs;
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
mobiscroll.eventcalendar('#demo-setting-the-timezone', {
timezonePlugin: mobiscroll.dayjsTimezone,
dataTimezone: 'utc',
displayTimezone: 'local',
view: {
timeline: { type: 'week' },
},
dragToCreate: true,
dragToMove: true,
dragToResize: true,
data: [
{
start: '2026-11-07T07:00',
end: '2026-11-07T09:00',
title: 'Stakeholder mtg.',
resource: [1, 2, 4],
},
{
start: '2026-11-10T18:00',
end: '2026-11-10T19:30',
title: 'Wrapup mtg.',
resource: [2, 3, 5],
},
{
start: '2026-11-07T14:00',
end: '2026-11-07T18:00',
title: 'Business of Software Conference',
resource: [1, 3],
},
{
start: '2026-11-08T20:00',
end: '2026-11-08T21:50',
title: 'Product Team mtg.',
resource: [2, 3, 4],
},
{
start: '2026-11-06T13:00',
end: '2026-11-06T15:00',
title: 'Decision Making mtg.',
resource: [1, 4, 5],
},
{
start: '2026-11-08T13:00',
end: '2026-11-08T14:00',
title: 'Quick mtg. with Martin',
resource: 3,
},
{
start: '2026-11-10T12:00',
end: '2026-11-10T16:00',
title: 'Team-Building',
resource: [1, 2, 3, 4, 5],
},
],
resources: [
{
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',
},
],
});
<div id="demo-setting-the-timezone"></div>