Angular Timeline Dual Synchronized Flight Scheduling
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.
Dual Synchronized Flight Scheduling
For creating complex dashboards like for managing jet bookings sometimes two separate timeline instances are necessary.
Sticking two instances together with synchronized horizontal scrolling allows for a setup where the top timeline is a list of bookings with one flight per rows and the bottom timeline holds available aircrafts.
Only moving events from the top timeline is allowed and events are fixed in time, meaning the start and end cannot be changed. Things like eventOverlap is set to false to avoid overlapping events.
Demo
Code
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
MbscCalendarColor,
MbscCalendarEvent,
MbscEventcalendarOptions,
MbscModule,
MbscResource,
Notifications,
setOptions ,
} from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [Notifications],
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {
constructor(private notify: Notifications) {}
bookings: MbscCalendarEvent[] = [
{
start: '2026-11-06T06:00',
end: '2026-11-06T10:00',
title: 'Budapest - Ljubljana',
resource: 1,
},
{
start: '2026-11-06T15:00',
end: '2026-11-06T18:00',
title: 'Ljubljana - Berlin',
resource: 1,
},
{
start: '2026-11-06T04:00',
end: '2026-11-06T12:00',
title: 'Los Angeles - Dublin',
resource: 2,
},
{
start: '2026-11-06T18:00',
end: '2026-11-06T23:00',
title: 'Dublin - Bucharest',
resource: 2,
},
{
start: '2026-11-06T06:00',
end: '2026-11-06T14:00',
title: 'Chicago - Amsterdam',
resource: 3,
},
{
start: '2026-11-06T17:00',
end: '2026-11-06T22:00',
title: 'Amsterdam - Cairo',
resource: 3,
},
{
start: '2026-11-06T10:00',
end: '2026-11-06T14:00',
title: 'Hong Kong - Sydney',
resource: 4,
},
{
start: '2026-11-06T15:00',
end: '2026-11-06T21:00',
title: 'Sydney - Tokyo',
resource: 4,
},
{
start: '2026-11-06T04:00',
end: '2026-11-06T12:00',
title: 'Paris - Washington, D.C.',
resource: 5,
},
{
start: '2026-11-06T12:00',
end: '2026-11-06T18:00',
title: 'Washington, D.C. - Los-Angeles',
resource: 5,
},
{
start: '2026-11-06T03:00',
end: '2026-11-06T11:00',
title: 'Los Angeles - Dublin',
resource: 6,
},
{
start: '2026-11-06T13:00',
end: '2026-11-06T18:00',
title: 'Dublin - Rome',
resource: 6,
},
{
start: '2026-11-06T05:00',
end: '2026-11-06T12:00',
title: 'Barcelona - Dubai',
resource: 7,
},
{
start: '2026-11-06T13:00',
end: '2026-11-06T20:00',
title: 'Dubai - Tokyo',
resource: 7,
},
{
start: '2026-11-06T03:30',
end: '2026-11-06T13:00',
title: 'Rome - Toronto',
resource: 8,
},
{
start: '2026-11-06T16:00',
end: '2026-11-06T19:00',
title: 'Toronto - New-York',
resource: 8,
},
{
start: '2026-11-06T03:00',
end: '2026-11-06T14:00',
title: 'Vienna - Shanghai',
resource: 9,
},
{
start: '2026-11-06T16:00',
end: '2026-11-06T23:30',
title: 'Shanghai - Moscow',
resource: 9,
},
{
start: '2026-11-06T08:00',
end: '2026-11-06T13:00',
title: 'London - Cairo',
resource: 10,
},
{
start: '2026-11-06T15:30',
end: '2026-11-06T19:30',
title: 'Cairo - Sofia',
resource: 10,
},
{
start: '2026-11-06T02:00',
end: '2026-11-06T13:00',
title: 'Istanbul - New York',
resource: 11,
},
{
start: '2026-11-06T16:00',
end: '2026-11-06T20:00',
title: 'New York - Montreal',
resource: 11,
},
{
start: '2026-11-06T05:00',
end: '2026-11-06T11:00',
title: 'Seattle - Miami',
resource: 12,
},
{
start: '2026-11-06T12:00',
end: '2026-11-06T21:00',
title: 'Miami - Buenos-Aires',
resource: 12,
},
{
start: '2026-11-07T04:00',
end: '2026-11-07T16:00',
title: 'Hong Kong - Sydney',
resource: 1,
},
{
start: '2026-11-07T06:00',
end: '2026-11-07T10:00',
title: 'Los Angeles - Dublin',
resource: 2,
},
{
start: '2026-11-07T03:00',
end: '2026-11-07T11:00',
title: 'Budapest - Ljubljana',
resource: 4,
},
{
start: '2026-11-07T05:00',
end: '2026-11-07T12:00',
title: 'Los Angeles - Dublin',
resource: 6,
},
{
start: '2026-11-07T13:00',
end: '2026-11-07T23:00',
title: 'London - Cairo',
resource: 7,
},
{
start: '2026-11-07T03:00',
end: '2026-11-07T14:00',
title: 'Miami - Buenos-Aires',
resource: 9,
},
{
start: '2026-11-07T06:00',
end: '2026-11-07T12:00',
title: 'Barcelona - Dubai',
resource: 10,
},
{
start: '2026-11-07T08:00',
end: '2026-11-07T22:00',
title: 'Istanbul - New York',
resource: 11,
},
{
start: '2026-11-07T05:00',
end: '2026-11-07T11:00',
title: 'Vienna - Shanghai',
resource: 12,
},
];
flights: MbscCalendarEvent[] = [
{
start: '2026-11-06T10:00',
end: '2026-11-06T17:00',
title: 'Barcelona - Dubai',
resource: 4,
},
{
start: '2026-11-06T07:30',
end: '2026-11-06T16:00',
title: 'Toronto - Rome',
resource: 8,
},
{
start: '2026-11-06T04:00',
end: '2026-11-06T08:00',
title: 'Ljubljana - Budapest',
resource: 1,
},
{
start: '2026-11-06T02:00',
end: '2026-11-06T10:00',
title: 'Paris - Washington, D.C.',
resource: 2,
},
{
start: '2026-11-06T12:00',
end: '2026-11-06T23:00',
title: 'New York - Istanbul',
resource: 7,
},
{
start: '2026-11-06T15:00',
end: '2026-11-06T23:00',
title: 'Moscow - Tokyo',
resource: 3,
},
];
jets: MbscResource[] = [
{
id: 'Op 1',
name: 'Prestige Air',
eventCreation: false,
children: [
{
id: 1,
code: '#AF 7703',
crew: 52,
name: 'Red Bolt',
color: '#1dab2f',
img: 'https://img.mobiscroll.com/demos/jet-1.jpg',
},
{
id: 2,
code: '#BQ 4718',
crew: 47,
name: 'Skyroar',
color: '#1dab2f',
img: 'https://img.mobiscroll.com/demos/jet-2.jpg',
},
{
id: 3,
code: '#ZM 8430',
crew: 24,
name: 'Agile Raven',
color: '#1dab2f',
img: 'https://img.mobiscroll.com/demos/jet-3.jpg',
},
],
},
{
id: 'Op 2',
name: 'Elite Wings',
eventCreation: false,
children: [
{
id: 4,
code: '#XG 5500',
crew: 43,
name: 'Monsterbolt',
color: '#1dab2f',
img: 'https://img.mobiscroll.com/demos/jet-4.jpg',
},
{
id: 5,
code: '#FL 2531',
crew: 22,
name: 'Airrise',
color: '#1dab2f',
img: 'https://img.mobiscroll.com/demos/jet-5.jpg',
},
{
id: 6,
code: '#PA 6487',
crew: 84,
name: 'Starblast',
color: '#1dab2f',
img: 'https://img.mobiscroll.com/demos/jet-6.jpg',
},
{
id: 7,
code: '#PP 9812',
crew: 28,
name: 'Ebonfire',
color: '#1dab2f',
img: 'https://img.mobiscroll.com/demos/jet-7.jpg',
},
],
},
{
id: 'Op 3',
name: 'Luxury Skies',
eventCreation: false,
children: [
{
id: 8,
code: '#DN 3191',
crew: 36,
name: 'Dark Bee',
color: '#1dab2f',
img: 'https://img.mobiscroll.com/demos/jet-8.jpg',
},
{
id: 9,
code: '#ZW 2328',
crew: 76,
name: 'Keen Sparrow',
color: '#1dab2f',
img: 'https://img.mobiscroll.com/demos/jet-9.jpg',
},
{
id: 10,
code: '#RX 9898',
crew: 37,
name: 'Jagged Bolt',
color: '#1dab2f',
img: 'https://img.mobiscroll.com/demos/jet-10.jpg',
},
],
},
];
reservations: MbscResource[] = [
{
id: 1,
name: 'Alison Reyes',
},
{
id: 2,
name: 'Shauna Perry',
},
{
id: 3,
name: 'Jan Whitney',
},
{
id: 4,
name: 'Freddie Durham',
},
{
id: 5,
name: 'William Dillon',
},
{
id: 6,
name: 'Tyrell Edwards',
},
{
id: 7,
name: 'Caitlyn Riddle',
},
{
id: 8,
name: 'Liam Mays',
},
{
id: 9,
name: 'Frank Medina',
},
{
id: 10,
name: 'Calvin Larsen',
},
{
id: 11,
name: 'Heather Walsh',
},
{
id: 12,
name: 'Conner Paul',
},
];
invalid: MbscCalendarEvent[] = [];
selectedDate: any;
firstCalCont: any;
secondCalCont: any;
skipFirstScroll = false;
skipSecondScroll = false;
firstCalOptions: MbscEventcalendarOptions = {
view: {
timeline: {
type: 'day',
size: 1,
},
},
dragToMove: false,
dragToCreate: false,
dragToResize: false,
eventDelete: true,
externalDrag: true,
onPageLoading: (args) => {
setTimeout(() => {
this.selectedDate = args.firstDay;
}, 100);
},
onPageLoaded: () => {
if (!this.firstCalCont) {
this.firstCalCont = document.querySelector('.md-drag-drop-bw-inst-first .mbsc-timeline-grid-scroll');
this.firstCalCont.addEventListener('scroll', this.handleFirstScroll);
}
},
onDestroy: () => {
if (this.firstCalCont) {
this.firstCalCont.removeEventListener('scroll', this.handleFirstScroll);
}
},
};
secondCalOptions: MbscEventcalendarOptions = {
view: {
timeline: {
type: 'day',
size: 1,
},
},
showControls: false,
dragToCreate: false,
dragToMove: true,
dragToResize: false,
dragInTime: false,
externalDrop: true,
eventDelete: true,
eventOverlap: false,
onEventCreated: (args) => {
setTimeout(() => {
this.flights.push(args.event);
this.notify.toast({
display: 'center',
message: 'Flight scheduled',
});
});
},
onEventDeleted: (args) => {
setTimeout(() => {
this.flights = this.flights.filter((flight) => flight.id !== args.event.id);
});
},
onEventCreateFailed: () => {
this.notify.toast({
display: 'center',
message: "There's already a flight on this date",
});
},
onEventUpdateFailed: () => {
this.notify.toast({
display: 'center',
message: "There's already a flight on this date",
});
},
onEventDragStart: (args) => {
const unavailable: Record<number, boolean> = {};
const invalid: MbscCalendarColor = {
cssClass: 'md-drag-drop-invalid',
recurring: { repeat: 'daily' },
resource: [],
};
const eventStart = new Date(args.event.start as string);
const eventEnd = new Date(args.event.end as string);
// Filter unavailable jets
this.flights.forEach((flight) => {
const flightStart = new Date(flight.start as string);
const flightEnd = new Date(flight.end as string);
if (flight.id !== args.event.id && flightStart < eventEnd && flightEnd > eventStart) {
unavailable[flight.resource as number] = true;
}
});
this.flights.forEach((flight) => {
if (unavailable[flight.resource as number]) {
flight.cssClass = 'md-drag-drop-faded';
}
});
this.jets.forEach((group) => {
if (group.children) {
group.children.forEach((jet) => {
if (unavailable[jet.id as number]) {
(invalid.resource as number[]).push(jet.id as number);
}
});
}
});
this.invalid = [invalid];
},
onEventDragEnd: () => {
this.flights.forEach((flight) => {
delete flight.cssClass;
});
this.invalid = [];
},
onPageLoaded: () => {
if (!this.secondCalCont) {
this.secondCalCont = document.querySelector('.md-drag-drop-bw-inst-second .mbsc-timeline-grid-scroll');
this.secondCalCont.addEventListener('scroll', this.handleSecondScroll);
}
},
onDestroy: () => {
if (this.secondCalCont) {
this.secondCalCont.removeEventListener('scroll', this.handleSecondScroll);
}
},
};
handleFirstScroll = (ev: any) => {
if (this.secondCalCont && !this.skipSecondScroll) {
this.skipFirstScroll = true;
this.secondCalCont.scrollLeft = ev.target.scrollLeft;
}
this.skipFirstScroll = false;
};
handleSecondScroll = (ev: any) => {
if (this.firstCalCont && !this.skipFirstScroll) {
this.skipSecondScroll = true;
this.firstCalCont.scrollLeft = ev.target.scrollLeft;
}
this.skipSecondScroll = false;
};
}
<div class="mbsc-flex-col md-drag-drop-bw-inst-cont">
<mbsc-eventcalendar
[data]="bookings"
[resources]="reservations"
[options]="firstCalOptions"
[(selectedDate)]="selectedDate"
class="md-drag-drop-bw-inst-first"
></mbsc-eventcalendar>
<mbsc-eventcalendar
[invalid]="invalid"
[data]="flights"
[resources]="jets"
[options]="secondCalOptions"
[(selectedDate)]="selectedDate"
[resourceTemplate]="myResourceTemplate"
class="md-drag-drop-bw-inst-second"
>
<ng-template #myResourceTemplate let-resource>
<div *ngIf="!resource.children; else elseBlock" class="mbsc-flex mbsc-align-items-center mbsc-justify-content-start">
<img class="md-drag-drop-bw-inst-avatar" [attr.alt]="resource.name" [src]="resource.img" />
<div class="md-drag-drop-bw-inst-details mbsc-flex-col mbsc-flex-1-0">
<div class="md-drag-drop-bw-inst-name">{{ resource.name }}</div>
<div class="md-aircraft-code mbsc-flex mbsc-justify-content-between">
<div>{{ resource.code }}️</div>
<div><span [innerHTML]="'🧑🏽✈️'"></span>{{ resource.crew }}</div>
</div>
</div>
</div>
<ng-template #elseBlock>{{ resource.name }}</ng-template>
</ng-template>
</mbsc-eventcalendar>
</div>
.md-drag-drop-bw-inst-cont .mbsc-eventcalendar {
height: 500px;
}
.md-drag-drop-bw-inst-cont .mbsc-timeline-parent {
height: 32px;
}
.md-drag-drop-bw-inst-cont .mbsc-timeline-resource {
padding-left: 5px !important;
}
.md-drag-drop-bw-inst-cont .mbsc-timeline-row-gutter {
height: 6px;
}
.md-drag-drop-bw-inst-cont .mbsc-timeline-resource-depth-step {
width: 0;
}
.md-drag-drop-bw-inst-second .mbsc-timeline-header,
.md-drag-drop-bw-inst-second .mbsc-timeline-header-sticky {
display: none;
}
.md-aircraft-code {
color: #939995;
}
.md-drag-drop-bw-inst-cont {
min-height: 500px;
height: 100%;
}
.md-drag-drop-bw-inst-first {
border-bottom: 5px solid #ccc;
}
.md-drag-drop-bw-inst-avatar {
max-height: 55px;
max-width: 55px;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.md-drag-drop-bw-inst-details {
margin-left: 16px;
font-size: 12px;
}
.md-drag-drop-bw-inst-title {
font-size: 12px;
margin-top: 5px;
}
.md-drag-drop-faded {
opacity: 0.3;
}
.md-drag-drop-invalid.mbsc-schedule-invalid {
background: repeating-linear-gradient(-45deg, #f3f3f3, #f3f3f3 11px, #e5e5e5 11px, #e5e5e5 22px);
}