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:
html<mbsc-eventcalendar
dataTimezone="utc"
displayTimezone="local "
[timezonePlugin]="myDayjsTimezone"
[data]="myEvents"
[view]="{ timeline: { type: 'week' }}"
></mbsc-eventcalendar>
tsimport { dayjsTimezone } from '@mobiscroll/angular';
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;
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
myDayjsTimezone = dayjsTimezone;
myEvents = [{
start: '2026-11-04T07:00:00Z',
end: '2026-11-04T09:00:00Z',
title: 'Stakeholder mtg.',
resource: [1, 2, 4]
}, {
start: '2026-11-07T18:00:00Z',
end: '2026-11-07T19:30:00Z',
title: 'Wrapup mtg.',
resource: [2, 3, 5]
}, {
start: '2026-11-04T14:00:00Z',
end: '2026-11-04T18:00:00Z',
title: 'Business of Software Conference',
resource: [1, 3]
}, {
start: '2026-11-05T20:00:00Z',
end: '2026-11-05T21:50:00Z',
title: 'Product Team mtg.',
resource: [2, 3, 4]
}, {
start: '2026-11-03T13:00:00Z',
end: '2026-11-03T15:00:00Z',
title: 'Decision Making mtg.',
resource: [1, 4, 5]
}, {
start: '2026-11-05T13:00:00Z',
end: '2026-11-05T14:00:00Z',
title: 'Quick mtg. with Martin',
resource: 3
}, {
start: '2026-11-07T12:00:00Z',
end: '2026-11-07T16:00:00Z',
title: 'Team-Building',
resource: [1, 2, 3, 4, 5]
}];
}
ComponentTemplate
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
dayjsTimezone,
MbscCalendarEvent,
MbscEventcalendarView,
MbscModule,
MbscResource,
MbscTimezonePlugin,
setOptions ,
} from '@mobiscroll/angular';
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
dayjs.extend(utc);
dayjs.extend(timezone);
dayjsTimezone.dayjs = dayjs;
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {
myEvents: MbscCalendarEvent[] = [
{
start: '2026-11-04T07:00',
end: '2026-11-04T09:00',
title: 'Stakeholder mtg.',
resource: [1, 2, 4],
},
{
start: '2026-11-07T18:00',
end: '2026-11-07T19:30',
title: 'Wrapup mtg.',
resource: [2, 3, 5],
},
{
start: '2026-11-04T14:00',
end: '2026-11-04T18:00',
title: 'Business of Software Conference',
resource: [1, 3],
},
{
start: '2026-11-05T20:00',
end: '2026-11-05T21:50',
title: 'Product Team mtg.',
resource: [2, 3, 4],
},
{
start: '2026-11-03T13:00',
end: '2026-11-03T15:00',
title: 'Decision Making mtg.',
resource: [1, 4, 5],
},
{
start: '2026-11-05T13:00',
end: '2026-11-05T14:00',
title: 'Quick mtg. with Martin',
resource: 3,
},
{
start: '2026-11-07T12:00',
end: '2026-11-07T16:00',
title: 'Team-Building',
resource: [1, 2, 3, 4, 5],
},
];
myResources: 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',
},
];
myView: MbscEventcalendarView = { timeline: { type: 'week' } };
myTimezonePlugin: MbscTimezonePlugin = dayjsTimezone;
}
<mbsc-eventcalendar
dataTimezone="utc"
displayTimezone="local"
[data]="myEvents"
[timezonePlugin]="myTimezonePlugin"
[view]="myView"
[dragToCreate]="true"
[dragToMove]="true"
[dragToResize]="true"
>
</mbsc-eventcalendar>