Angular Timeline Work Order 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.
Work Order Scheduling
When scheduling work orders and synchronizing them across various assets, the timeline can be of enormous value. Resources of the same type can be grouped and arranged in multi-depth hierarchies. The list of various assets, employees, contractors can be added and organized under it.
For add/edit a custom form with the necessary fields (including resources) can be built. Resources linked to a work order can be of various categories, eg. drivers, trucks, contractors and will show up in their respective rows.
You can use the date header template and add a simple event template to show the $ value and print the total daily revenue below every day in the header.
Demo
Code
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
formatDate,
MbscCalendarEvent,
MbscDatepickerOptions,
MbscEventcalendar,
MbscEventcalendarOptions,
MbscModule,
MbscPopup,
MbscPopupOptions,
MbscResource,
Notifications,
setOptions ,
} from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [Notifications],
standalone: true,
imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
constructor(private notify: Notifications) {}
@ViewChild('calendar', { static: false })
calendar!: MbscEventcalendar;
@ViewChild('popup', { static: false })
popup!: MbscPopup;
popupEventTitle: string | undefined;
popupEventLocation: string | undefined;
popupEventBill: number | undefined;
popupEventNotes: string | undefined;
popupEventDates: any;
formatDate = formatDate;
myEvents: MbscCalendarEvent[] = [
{
start: '2026-11-02T06:00',
end: '2026-11-02T14:00',
title: 'Farmhouse TPH',
location: '3339 Spruce Drive',
resource: ['d2', 'cm2', 'd4', 'cp1', 'cm2', 'ce2', 'b1'],
color: '#12ca6c',
cost: 48000,
},
{
start: '2026-11-03T08:00',
end: '2026-11-03T18:00',
title: 'Block of flats KXT',
location: '4698 Mercer Street',
resource: ['d1', 'cm1', 'd3', 'cp1', 'cm3', 'ce2', 'b2'],
color: '#c170c3',
cost: 36000,
},
{
start: '2026-11-04T12:00',
end: '2026-11-04T20:00',
title: 'Apartment house UGL',
location: '3647 Tavern Place',
resource: ['d3', 'cm2', 'd4', 'cp2', 'cm3', 'ce1', 'b2'],
color: '#03c9d2',
cost: 50000,
},
{
start: '2026-11-05T11:00',
end: '2026-11-05T19:00',
title: 'Detached house WKB',
location: '956 Dovetail Estates',
resource: ['d1', 'cm3', 'd4', 'cp3', 'cm4', 'c2', 'b1', 'ce2'],
color: '#ff1515',
cost: 55000,
},
{
start: '2026-11-06T10:00',
end: '2026-11-06T18:00',
title: 'Apartment house XAZ',
location: '4919 Jett Lane, Inglewood',
resource: ['d1', 'cm4', 'd4', 'cp1', 'cm2', 'c2', 'b2'],
color: '#12ca6c',
cost: 62000,
},
{
start: '2026-11-06T08:00',
end: '2026-11-06T16:00',
title: 'Block of flats DRG',
location: '486 Sycamore Fork Road',
resource: ['d2', 'cm1', 'd3', 'cp2', 'ce2', 'c1', 'b1'],
color: '#efd414',
cost: 39000,
},
{
start: '2026-11-07T09:00',
end: '2026-11-07T17:00',
title: 'Farmhouse YQK',
location: '1563 Retreat Avenue',
resource: ['d2', 'cm4', 'd4', 'cm2', 'cp1', 'c2', 'b2'],
color: '#cf49d8',
cost: 45000,
},
{
start: '2026-11-08T07:00',
end: '2026-11-08T15:00',
title: 'Apartment house SWP',
location: '628 Daylene Drive',
resource: ['d2', 'cm3', 'd3', 'cm1', 'cp2', 'c1', 'b1'],
color: '#c170c3',
cost: 53000,
},
{
start: '2026-11-09T10:00',
end: '2026-11-09T18:00',
title: 'Detached house OZL',
location: '1830 Rinehart Road',
resource: ['d3', 'cm2', 'd4', 'cp2', 'cm3', 'ce1', 'b2'],
color: '#ff1515',
cost: 47000,
},
{
start: '2026-11-10T11:00',
end: '2026-11-10T19:00',
title: 'Farmhouse PSZ',
location: '2410 Union Street',
resource: ['d1', 'cm3', 'd4', 'cp3', 'cm4', 'c2', 'b1', 'ce2'],
color: '#ff1515',
cost: 64000,
},
];
myResources: MbscResource[] = [
{
id: 'contractors',
name: 'Contractors',
collapsed: true,
eventCreation: false,
children: [
{
id: 'builders',
name: 'Builders',
eventCreation: false,
children: [
{
id: 'b1',
name: 'Jude Chester',
},
{
id: 'b2',
name: 'Willis Kane',
},
],
},
{
id: 'carpenters',
name: 'Carpenters',
eventCreation: false,
children: [
{
id: 'c1',
name: 'Derek Austyn',
},
{
id: 'c2',
name: 'Merv Kenny',
},
],
},
],
},
{
id: 'employees',
name: 'Employees',
eventCreation: false,
children: [
{
id: 'cement_masons',
name: 'Cement masons',
eventCreation: false,
children: [
{
id: 'ce1',
name: 'Ford Kaiden',
},
{
id: 'ce2',
name: 'Jewell Ryder',
},
],
},
{
id: 'divers',
name: 'Drivers',
eventCreation: false,
children: [
{
id: 'd1',
name: 'Fred Valdez',
},
{
id: 'd2',
name: 'Jon Drake',
},
{
id: 'd3',
name: 'Lou Andie',
},
{
id: 'd4',
name: 'Leon Porter',
},
],
},
],
},
{
id: 'equipment',
name: 'Equipment',
collapsed: true,
eventCreation: false,
children: [
{
id: 'concrete_mixers',
name: 'Concrete mixers',
eventCreation: false,
children: [
{
id: 'cm1',
name: 'AL 45 RFT',
},
{
id: 'cm2',
name: 'KQ 62 PVZ',
},
{
id: 'cm3',
name: 'RG 91 ZAL',
},
{
id: 'cm4',
name: 'XF 83 GFM',
},
],
},
{
id: 'concrete_pumps',
name: 'Concrete pumps',
eventCreation: false,
children: [
{
id: 'cp1',
name: 'GF 61 BVM',
},
{
id: 'cp2',
name: 'YC 55 ECT',
},
],
},
],
},
];
tempEvent!: MbscCalendarEvent;
getCostString(cost: any): any {
return cost.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
getRevenue(args: any): any {
const events = args.events;
let costs = 0;
if (events) {
for (const event of events) {
costs += event.cost;
}
}
return 'Total revenue: $' + this.getCostString(costs);
}
calendarOptions: MbscEventcalendarOptions = {
clickToCreate: 'double',
dragToCreate: true,
dragToMove: true,
dragToResize: true,
dragTimeStep: 30,
view: {
timeline: {
type: 'week',
startDay: 1,
endDay: 5,
},
},
onEventClick: (args) => {
this.isEdit = true;
this.tempEvent = args.event;
// Fill popup form with event data
this.loadPopupForm(args.event);
// Set popup options
this.popupHeaderText = 'Edit event';
this.popupButtons = this.popupEditButtons;
this.popupAnchor = args.domEvent.currentTarget;
// Open the popup
this.popup.open();
},
onEventCreated: (args) => {
setTimeout(() => {
this.isEdit = false;
this.tempEvent = args.event;
// Fill popup form with event data
this.loadPopupForm(args.event);
// Set popup options
this.popupHeaderText = 'New work order';
this.popupButtons = this.popupAddButtons;
this.popupAnchor = args.target;
// Open the popup
this.popup.open();
});
},
onEventDeleted: (args) => {
setTimeout(() => {
this.deleteEvent(args.event);
});
},
onEventUpdated: () => {
// Here you can update the event in your storage as well, after drag & drop or resize
// ...
},
};
popupHeaderText!: string;
popupAnchor: HTMLElement | undefined;
popupAddButtons = [
'cancel',
{
handler: () => {
this.saveEvent();
},
keyCode: 'enter',
text: 'Add',
cssClass: 'mbsc-popup-button-primary',
},
];
popupEditButtons = [
'cancel',
{
handler: () => {
this.saveEvent();
},
keyCode: 'enter',
text: 'Save',
cssClass: 'mbsc-popup-button-primary',
},
];
popupButtons: any = [];
popupOptions: MbscPopupOptions = {
display: 'bottom',
contentPadding: false,
fullScreen: true,
onClose: () => {
if (!this.isEdit) {
// Refresh the list, if add popup was canceled, to remove the temporary event
this.myEvents = [...this.myEvents];
}
},
responsive: {
medium: {
display: 'anchored',
width: 520,
fullScreen: false,
touchUi: false,
},
},
};
datePickerOptions: MbscDatepickerOptions = {
controls: ['time'],
select: 'range',
showRangeLabels: false,
touchUi: false,
stepMinute: 30,
minTime: '06:00',
maxTime: '22:00',
};
isEdit = false;
loadPopupForm(event: MbscCalendarEvent): void {
this.popupEventTitle = event.title;
this.popupEventLocation = event['location'];
this.popupEventBill = +event['cost'] || 0;
this.popupEventNotes = event['notes'];
this.popupEventDates = [event.start, event.end];
this.setCheckboxes(event.resource);
}
saveEvent(): void {
this.tempEvent.title = this.popupEventTitle;
this.tempEvent['location'] = this.popupEventLocation;
this.tempEvent['cost'] = +this.popupEventBill! || 0;
this.tempEvent['notes'] = this.popupEventNotes;
this.tempEvent.start = this.popupEventDates[0];
this.tempEvent.end = this.popupEventDates[1];
this.tempEvent.resource = this.getCheckedResources();
if (this.isEdit) {
// Update the event in the list
this.myEvents = [...this.myEvents];
// Here you can update the event in your storage as well
// ...
} else {
// Add the new event to the list
this.myEvents = [...this.myEvents, this.tempEvent];
// Here you can add the event to your storage as well
// ...
}
// Navigate the calendar
this.calendar.navigateToEvent(this.tempEvent);
// Close the popup
this.popup.close();
}
deleteEvent(event: MbscCalendarEvent): void {
this.myEvents = this.myEvents.filter((item) => item.id !== event.id);
this.notify.snackbar({
button: {
action: () => {
this.myEvents = [...this.myEvents, event];
},
text: 'Undo',
},
message: 'Event deleted',
});
// Here you can delete the event from your storage as well
// ...
}
onDeleteClick(): void {
this.deleteEvent(this.tempEvent);
this.popup.close();
}
extendDefaultEvent(): MbscCalendarEvent {
return {
title: 'Work order',
cost: 0,
};
}
setCheckboxes(resource: any): void {
for (const resources of this.myResources) {
if (resources.children) {
for (const res of resources.children) {
if (res.children) {
for (const r of res.children) {
r['checked'] = resource.indexOf(r.id) !== -1;
}
}
}
}
}
}
getCheckedResources(): any {
const checkedResources = [];
const startResource = this.tempEvent.resource;
for (const resources of this.myResources) {
if (resources.children) {
for (const res of resources.children) {
if (res.children) {
for (const r of res.children) {
if (r['checked']) {
checkedResources.push(r.id);
}
}
}
}
}
}
return checkedResources.findIndex((e) => e === startResource) === -1
? [...checkedResources, this.tempEvent.resource]
: checkedResources;
}
}
<mbsc-eventcalendar
#calendar
class="md-work-order-scheduling"
[data]="myEvents"
[resources]="myResources"
[options]="calendarOptions"
[extendDefaultEvent]="extendDefaultEvent"
[timelineDayTemplate]="dayTemp"
[timelineEventContentTemplate]="eventTemp"
>
<ng-template #dayTemp let-day>
<div class="md-work-order-date">{{formatDate('DD DDD MMM YYYY', day.date)}}</div>
<div class="md-work-order-date-title">{{getRevenue(day)}}</div>
</ng-template>
<ng-template #eventTemp let-event>
<div>{{event.title}}<span class="md-work-order-price-tag">${{getCostString(event.original.cost)}}</span></div>
</ng-template>
</mbsc-eventcalendar>
<mbsc-popup [options]="popupOptions" [anchor]="popupAnchor" [buttons]="popupButtons" [headerText]="popupHeaderText" #popup>
<div class="mbsc-form-group">
<mbsc-input label="Title" [(ngModel)]="popupEventTitle"></mbsc-input>
<mbsc-input label="Location" [(ngModel)]="popupEventLocation"></mbsc-input>
<mbsc-input label="Bill to customer ($)" [(ngModel)]="popupEventBill"></mbsc-input>
<mbsc-textarea label="Notes" [(ngModel)]="popupEventNotes"></mbsc-textarea>
</div>
<div class="mbsc-form-group">
<mbsc-datepicker
[(ngModel)]="popupEventDates"
[options]="datePickerOptions"
[startInput]="startInput"
[endInput]="endInput"
></mbsc-datepicker>
<mbsc-input #startInput label="Starts"></mbsc-input>
<mbsc-input #endInput label="Ends"></mbsc-input>
</div>
<div class="mbsc-form-group">
<div class="mbsc-grid mbsc-no-padding">
<div class="mbsc-row">
<ng-container *ngFor="let resources of myResources;">
<ng-container *ngFor="let res of resources.children;">
<div class="mbsc-col-sm-4">
<ng-container>
<div class="mbsc-form-group-title">{{res.name}}</div>
<mbsc-checkbox
*ngFor="let r of res.children;"
label="{{r.name}}"
[(ngModel)]="r['checked']"
theme="material"
class="md-work-order-checkbox-label"
></mbsc-checkbox>
</ng-container>
</div>
</ng-container>
</ng-container>
</div>
</div>
</div>
<div class="mbsc-form-group">
<div *ngIf="isEdit" class="mbsc-button-group">
<mbsc-button class="mbsc-button-block" color="danger" variant="outline" (click)="onDeleteClick()">Delete work order</mbsc-button>
</div>
</div>
</mbsc-popup>
.md-work-order-checkbox-label.mbsc-checkbox {
padding-top: 5px;
padding-bottom: 5px;
}
.md-work-order-date {
font-size: 14px;
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
.md-work-order-date-title {
font-size: 13px;
padding: 5px 10px;
line-height: 18px;
opacity: 0.6;
}
.md-work-order-price-tag {
display: inline-block;
font-size: 11px;
line-height: 16px;
vertical-align: middle;
border: 1px solid currentColor;
border-radius: 5px;
margin: 0 10px;
padding: 0px 5px;
opacity: 0.6;
}
.md-work-order-scheduling .mbsc-timeline-parent {
height: 32px;
}