Angular Timeline Multiple Timezone Support
Get started with this exampleUsage
theme: 'ios' You can turn auto theming on and let it decide based on the platform.
Usage
themeVariant: 'light' You can turn auto dark mode on based on system settings.
Usage
clickToCreate: true,
// click to create is on dragToCreate: true,
// drag to create is on dragToMove: true,
// reordering is on dragToResize: true,
// resizing is on eventDelete: true
// deleting is on Fine-tune drag & drop with these options, which are false by default.
Usage
locale: localeEn Selecting the locale loads the localized settings and the translated UI text.
Multiple Timezone Support
If the context requires users being able to change the timezone on the fly, you can add a custom dropdown with the desired timezones to the event calendar header. This can be of course placed externally to the calendar as well, eg. setting page.
Set the timezone of the incoming data through the dataTimezone - eg. 'utc', and set the display timezone through the displayTimezone - eg. 'America/Los_Angeles'
Demo
Code
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
dayjsTimezone,
MbscCalendarEvent,
MbscEventcalendarOptions,
MbscModule,
MbscResource,
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, FormsModule, MbscModule],
})
export class AppComponent {
myEvents: MbscCalendarEvent[] = [
{
start: '2026-11-06T07:00',
end: '2026-11-06T09:00',
title: 'Stakeholder mtg.',
resource: [1, 2, 4],
},
{
start: '2026-11-09T18:00',
end: '2026-11-09T19:30',
title: 'Wrapup mtg.',
resource: [2, 3, 5],
},
{
start: '2026-11-06T14:00',
end: '2026-11-06T18:00',
title: 'Business of Software Conference',
resource: [1, 3],
},
{
start: '2026-11-07T20:00',
end: '2026-11-07T21:50',
title: 'Product Team mtg.',
resource: [2, 3, 4],
},
{
start: '2026-11-05T13:00',
end: '2026-11-05T15:00',
title: 'Decision Making mtg.',
resource: [1, 4, 5],
},
{
start: '2026-11-07T13:00',
end: '2026-11-07T14:00',
title: 'Quick mtg. with Martin',
resource: 3,
},
{
start: '2026-11-09T12:00',
end: '2026-11-09T16: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',
},
];
timezone = 'utc';
timezones = [
{
text: 'America/Los Angeles',
value: 'America/Los_Angeles',
},
{
text: 'America/Chicago',
value: 'America/Chicago',
},
{
text: 'America/New York',
value: 'America/New_York',
},
{
text: 'UTC',
value: 'utc',
},
{
text: 'Europe/London',
value: 'Europe/London',
},
{
text: 'Europe/Berlin',
value: 'Europe/Berlin',
},
{
text: 'Europe/Bucharest',
value: 'Europe/Bucharest',
},
{
text: 'Asia/Shanghai',
value: 'Asia/Shanghai',
},
{
text: 'Asia/Tokyo',
value: 'Asia/Tokyo',
},
];
eventSettings: MbscEventcalendarOptions = {
view: {
timeline: { type: 'week' },
},
dragToCreate: true,
dragToMove: true,
dragToResize: true,
timezonePlugin: dayjsTimezone,
dataTimezone: 'utc',
};
onChange(ev: any) {
this.timezone = ev.value;
}
}
<mbsc-eventcalendar
[data]="myEvents"
[resources]="myResources"
[options]="eventSettings"
[headerTemplate]="myHeaderTemplate"
[displayTimezone]="timezone"
>
<ng-template #myHeaderTemplate>
<mbsc-calendar-nav></mbsc-calendar-nav>
<div class="md-timezone-header">
<mbsc-calendar-prev></mbsc-calendar-prev>
<mbsc-calendar-today></mbsc-calendar-today>
<mbsc-calendar-next></mbsc-calendar-next>
<mbsc-select [(ngModel)]="timezone" (onChange)="onChange($event)" [data]="timezones" inputStyle="box" [touchUi]="false"></mbsc-select>
</div>
</ng-template>
</mbsc-eventcalendar>
.md-timezone-header .mbsc-textfield-wrapper {
margin: 0.5em;
}
.md-timezone-header {
display: flex;
align-items: center;
margin-left: auto;
}