Restaurant Shift Scheduling
Usage
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.
Restaurant Shift Scheduling
With the combination of the timeline summary mode/event listing, time slots and the time slot templating features along with hierarchical resources you can create a restaurant shift planning UI.
The example features templating, dynamic occupancy count (how many employees are working on a specific shift), dynamically turning shifts on/off, switching between week and day view and much more. The header features custom components for filtering the view.
Try signing somone up for work by double clicking on an empty shift position.
Demo
Code
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { formatDate, MbscEventcalendarOptions, MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const defaultSlots = [
{
id: 1,
name: 'Night',
time: '2AM - 10AM',
},
{
id: 2,
name: 'Breakfast',
time: '8AM - 12PM',
},
{
id: 3,
name: 'Lunch',
time: '11AM - 3PM',
},
{
id: 4,
name: 'Dinner',
time: '4PM - 11PM',
},
{
id: 5,
name: 'After hours',
time: '11PM - 1AM',
},
];
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
resources = [
{
id: 1,
name: 'Barista',
icon: '☕️',
eventCreation: false,
children: [
{
id: 11,
name: 'Jude Chester',
color: '#1dab2f',
},
{
id: 12,
name: 'Willis Kane',
color: '#1dab2f',
},
{
id: 13,
name: 'Ryan Melicent',
color: '#1dab2f',
},
],
},
{
id: 2,
name: 'Bartenders',
icon: '🍸',
eventCreation: false,
children: [
{
id: 21,
name: 'Derek Austyn',
color: '#4981d6',
},
{
id: 22,
name: 'Merv Kenny',
color: '#4981d6',
},
{
id: 23,
name: 'Theo Calanthia',
color: '#4981d6',
},
],
},
{
id: 3,
name: 'Chefs',
icon: '👩🍳',
eventCreation: false,
children: [
{
id: 31,
name: 'Ford Kaiden',
color: '#d6d145',
},
{
id: 32,
name: 'Jewell Ryder',
color: '#d6d145',
},
{
id: 33,
name: 'Dory Edie',
color: '#d6d145',
},
],
},
{
id: 4,
name: 'Cleaners',
icon: '🧹',
eventCreation: false,
children: [
{
id: 41,
name: 'Breanne Lorinda',
color: '#ff1717',
},
{
id: 42,
name: 'Jenifer Kalyn',
color: '#ff1717',
},
{
id: 43,
name: 'Natalie Racquel',
color: '#ff1717',
},
{
id: 44,
name: 'Kaylin Toni',
color: '#ff1717',
},
{
id: 45,
name: 'Gray Kestrel',
color: '#ff1717',
},
{
id: 46,
name: 'Florence Amy',
color: '#ff1717',
},
],
},
{
id: 5,
name: 'Cooks',
icon: '🍲',
eventCreation: false,
children: [
{
id: 51,
name: 'Meredith Chantelle',
color: '#f7961e',
},
{
id: 52,
name: 'Jon Drake',
color: '#f7961e',
},
{
id: 53,
name: 'Carlyn Dorothy',
color: '#f7961e',
},
{
id: 54,
name: 'Isadora Lyric',
color: '#f7961e',
},
],
},
{
id: 6,
name: 'Hosts',
icon: '🛎',
eventCreation: false,
children: [
{
id: 61,
name: 'Layton Candace',
color: '#7056ff',
},
{
id: 62,
name: 'Sylvia Cale',
color: '#7056ff',
},
],
},
{
id: 7,
name: 'Managers',
icon: '👩💼',
eventCreation: false,
children: [
{
id: 71,
name: 'Fred Valdez',
color: '#3a8700',
},
{
id: 72,
name: 'Antonia Cindra',
color: '#3a8700',
},
{
id: 73,
name: 'Gerry Irma',
color: '#3a8700',
},
],
},
{
id: 8,
name: 'Servers',
icon: '🤵',
eventCreation: false,
children: [
{
id: 81,
name: 'Reg Izabelle',
color: '#e25dd2',
},
{
id: 82,
name: 'Adrianna Sawyer',
color: '#e25dd2',
},
{
id: 83,
name: 'Lou Andie',
color: '#e25dd2',
},
{
id: 84,
name: 'Leon Porter',
color: '#e25dd2',
},
],
},
{
id: 9,
name: 'Sommeliers',
icon: '🍷',
eventCreation: false,
children: [
{
id: 91,
name: 'Yancy Dustin',
color: '#34c8e0',
},
{
id: 92,
name: 'Sierra Clark',
color: '#34c8e0',
},
],
},
];
shifts = [
// Showing partial data. Download full source.
{
start: '2026-10-27T02:00',
end: '2026-10-27T10:00',
title: 'Derek',
resource: 21,
slot: 1,
},
{
start: '2026-10-27T02:00',
end: '2026-10-27T10:00',
title: 'Florence',
resource: 46,
slot: 1,
},
{
start: '2026-10-27T08:00',
end: '2026-10-27T12:00',
title: 'Willis',
resource: 12,
slot: 2,
},
{
start: '2026-10-27T08:00',
end: '2026-10-27T12:00',
title: 'Jewell',
resource: 32,
slot: 2,
},
{
start: '2026-10-27T08:00',
end: '2026-10-27T12:00',
title: 'Jenifer',
resource: 42,
slot: 2,
},
{
start: '2026-10-27T08:00',
end: '2026-10-27T12:00',
title: 'Jon',
resource: 52,
slot: 2,
},
{
start: '2026-10-27T08:00',
end: '2026-10-27T12:00',
title: 'Fred',
resource: 71,
slot: 2,
},
{
start: '2026-10-27T08:00',
end: '2026-10-27T12:00',
title: 'Adrianna',
resource: 82,
slot: 2,
},
{
start: '2026-10-27T08:00',
end: '2026-10-27T12:00',
title: 'Jude',
resource: 11,
slot: 3,
},
{
start: '2026-10-27T11:00',
end: '2026-10-27T15:00',
title: 'Jewell',
resource: 32,
slot: 3,
},
{
start: '2026-10-27T11:00',
end: '2026-10-27T15:00',
title: 'Gray',
resource: 45,
slot: 3,
},
{
start: '2026-10-27T11:00',
end: '2026-10-27T15:00',
title: 'Isadora',
resource: 54,
slot: 3,
},
{
start: '2026-10-27T11:00',
end: '2026-10-27T15:00',
title: 'Antonia',
resource: 72,
slot: 3,
},
{
start: '2026-10-27T11:00',
end: '2026-10-27T15:00',
title: 'Adrianna',
resource: 82,
slot: 3,
},
{
start: '2026-10-27T11:00',
end: '2026-10-27T15:00',
title: 'Leon',
resource: 84,
slot: 3,
},
{
start: '2026-10-27T11:00',
end: '2026-10-27T15:00',
title: 'Yancy',
resource: 91,
slot: 3,
},
{
start: '2026-10-27T16:00',
end: '2026-10-27T23:00',
title: 'Ryan',
resource: 13,
slot: 4,
},
{
start: '2026-10-27T16:00',
end: '2026-10-27T23:00',
title: 'Merv',
resource: 22,
slot: 4,
},
{
start: '2026-10-27T16:00',
end: '2026-10-27T23:00',
title: 'Ford',
resource: 31,
slot: 4,
},
{
start: '2026-10-27T16:00',
end: '2026-10-27T23:00',
title: 'Dory',
resource: 33,
slot: 4,
},
{
start: '2026-10-27T16:00',
end: '2026-10-27T23:00',
title: 'Breanne',
resource: 41,
slot: 4,
},
{
start: '2026-10-27T16:00',
end: '2026-10-27T23:00',
title: 'Meredith',
resource: 51,
slot: 4,
},
{
start: '2026-10-27T16:00',
end: '2026-10-27T23:00',
title: 'Carlyn',
resource: 53,
slot: 4,
},
{
start: '2026-10-27T16:00',
end: '2026-10-27T23:00',
title: 'Layton',
resource: 61,
slot: 4,
},
{
start: '2026-10-27T16:00',
end: '2026-10-27T23:00',
title: 'Gerry',
resource: 73,
slot: 4,
},
{
start: '2026-10-27T16:00',
end: '2026-10-27T23:00',
title: 'Reg',
resource: 81,
slot: 4,
},
{
start: '2026-10-27T16:00',
end: '2026-10-27T23:00',
title: 'Lou',
resource: 83,
slot: 4,
},
{
start: '2026-10-27T16:00',
end: '2026-10-27T23:00',
title: 'Sierra',
resource: 92,
slot: 4,
},
{
start: '2026-10-27T11:00',
end: '2026-10-27T11:59',
title: 'Derek',
resource: 21,
slot: 5,
},
{
start: '2026-10-27T11:00',
end: '2026-10-27T11:59',
title: 'Natalie',
resource: 43,
slot: 5,
},
{
start: '2026-10-27T11:00',
end: '2026-10-27T11:59',
title: 'Kaylin',
resource: 44,
slot: 5,
},
{
start: '2026-10-27T11:00',
end: '2026-10-27T11:59',
title: 'Fred',
resource: 71,
slot: 5,
}, // Showing partial data. Download full source.
];
shiftTimes = [
{
id: 1,
name: 'Night',
checked: true,
disabled: false,
},
{
id: 2,
name: 'Breakfast',
checked: true,
disabled: false,
},
{
id: 3,
name: 'Lunch',
checked: true,
disabled: false,
},
{
id: 4,
name: 'Dinner',
checked: true,
disabled: false,
},
{
id: 5,
name: 'After hours',
checked: true,
disabled: false,
},
];
slots = defaultSlots;
views = [
{
text: 'Day',
value: 'day',
},
{
text: 'Week',
value: 'week',
},
];
viewType = 'week';
calView: any = {
timeline: {
type: 'week',
eventDisplay: 'fill',
startDay: 1,
endDay: 5,
},
};
empty = '😶 empty...';
calendarOptions: MbscEventcalendarOptions = {
resources: this.resources,
clickToCreate: true,
dragToMove: true,
extendDefaultEvent: (event: any) => ({
title: this.getEmployeeName(event),
}),
onEventCreate: (args: any, inst: any) => {
if (this.isDouble(args.event, inst)) {
return false;
} else {
setTimeout(() => {
this.shifts = [...this.shifts, args.event];
});
return true;
}
},
onEventDeleted: (args: any) => {
setTimeout(() => {
this.shifts = this.shifts.filter((s: any) => s.id !== args.event.id);
});
},
onEventUpdate: (args: any, inst: any) => {
const event = args.event;
if (this.isDouble(event, inst)) {
return false;
}
const newName = this.getEmployeeName(event);
if (newName) {
const index = this.shifts.findIndex((x: any) => x.id === event.id);
this.shifts[index].title = newName;
}
return true;
},
};
isDouble(event: any, inst: any): any {
const date = event.start.setHours(0);
const events = inst.getEvents(date);
const ev = events.find((e: any) => new Date(e.start).setHours(0) === date && e.resource === event.resource && e.slot === event.slot);
return ev;
}
getEmployeeName(event: any): any {
for (const resource of this.resources) {
if (resource.children) {
for (const employee of resource.children) {
if (employee.id === event.resource) {
return employee.name.substring(0, employee.name.indexOf(' '));
}
}
}
}
}
getShiftsNrs(date: any, slotId: number): any {
const shiftList: any = [];
for (const shift of this.shifts) {
// Get slot id from resource id
const resourceNr = +shift.resource.toString().charAt(0);
if (shift.slot === slotId && date === this.formatMyDate(shift.start)) {
shiftList[resourceNr - 1] = (shiftList[resourceNr - 1] || 0) + 1;
}
}
return shiftList;
}
formatMyDate(date: any): any {
return formatDate('YYYY-MM-DD', new Date(date));
}
checkboxChange(): void {
const filteredSlots: any = [];
for (const slot of defaultSlots) {
if (this.shiftTimes.find((us: { id: number; checked: any }) => us.id === slot.id && us.checked)) {
filteredSlots.push(slot);
}
}
if (filteredSlots.length === 1) {
this.shiftTimes = this.shiftTimes.map((ut) => (ut.checked ? { ...ut, disabled: true } : ut));
} else {
this.shiftTimes = this.shiftTimes.map((ut) => ({ ...ut, disabled: false }));
}
this.slots = filteredSlots;
}
viewChange(ev: any): void {
this.calView =
ev.value === 'day'
? {
timeline: {
type: 'day',
eventDisplay: 'fill',
},
}
: {
timeline: {
type: 'week',
eventDisplay: 'fill',
startDay: 1,
endDay: 5,
},
};
}
}
<mbsc-eventcalendar
[data]="shifts"
[slots]="slots"
[view]="calView"
[options]="calendarOptions"
[headerTemplate]="headerTemp"
[resourceTemplate]="resourceTemp"
[slotTemplate]="slotTemp"
class="md-shift-management-calendar"
>
<ng-template #headerTemp>
<mbsc-calendar-nav></mbsc-calendar-nav>
<div class="mbsc-flex mbsc-flex-1-0 mbsc-justify-content-end">
<mbsc-checkbox
*ngFor="let st of shiftTimes;"
[(ngModel)]="st.checked"
[label]="st.name"
[disabled]="st.disabled"
(change)="checkboxChange()"
theme="material"
></mbsc-checkbox>
</div>
<mbsc-select [data]="views" inputStyle="box" [(ngModel)]="viewType" (onChange)="viewChange($event)"></mbsc-select>
<mbsc-calendar-prev></mbsc-calendar-prev>
<mbsc-calendar-today></mbsc-calendar-today>
<mbsc-calendar-next></mbsc-calendar-next>
</ng-template>
<ng-template #resourceTemp let-resource>
<div [ngClass]="{'md-shift-resource ': resource.children}" [ngStyle]="{color: resource.children ? resource.children[0].color : ''}">
<span *ngIf="resource.children" class="md-shift-resource-icon" [innerHTML]="resource.icon"></span> {{resource.name}}
</div>
</ng-template>
<ng-template #slotTemp let-args>
<div class="md-shift-header" *ngIf="formatMyDate(args.date) as date">
<div class="md-shift-name" *ngIf="getShiftsNrs(date, args.slot.id) as shiftList">
{{args.slot.name}}
<span class="md-shift-time">{{args.slot.time}}</span>
</div>
<ng-container *ngIf="getShiftsNrs(date, args.slot.id).length > 0">
<div [class]="'md-shift-counts-' + date + '-' + args.slot.id">
<ng-container *ngFor="let shift of getShiftsNrs(date, args.slot.id); let i = index">
<div *ngIf="shift" class="md-shift-count">
<span class="md-shift-icon" [innerHTML]="resources[i].icon"></span>
<span [class]="'md-shift-nr md-shift-nr-' + date + '-' + args.slot.id + '-' + (i + 1)"> {{shift}} </span>
</div>
<br *ngIf="i === 3" />
</ng-container>
</div>
</ng-container>
<ng-container *ngIf="getShiftsNrs(date, args.slot.id).length === 0">
<div class="md-shift-count" [innerHTML]="empty"></div>
</ng-container>
</div>
</ng-template>
</mbsc-eventcalendar>
.md-shift-management-calendar .mbsc-schedule-event {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
}
.md-shift-management-calendar .mbsc-timeline-slots {
height: 94px;
}
.md-shift-management-calendar .mbsc-timeline-header-placeholder {
height: 120px;
}
.md-shift-management-calendar .mbsc-timeline-resource {
display: flex;
align-items: center;
}
.md-shift-management-calendar .mbsc-timeline-slot {
width: 200px;
}
.md-shift-management-calendar .mbsc-timeline-parent {
height: 40px;
}
.md-shift-management-calendar .mbsc-checkbox {
padding: 18px 0 18px 45px;
}
.md-shift-management-calendar .mbsc-textfield-wrapper {
margin: 12px 12px 12px 28px;
}
.md-shift-management-calendar .mbsc-select.mbsc-textfield {
height: 32px;
width: 120px;
}
.md-shift-management-calendar .mbsc-icon.mbsc-select-icon {
width: 20px;
height: 20px;
top: 7px;
}
.md-shift-resource {
font-size: 18px;
}
.md-shift-resource-icon {
margin-right: 10px;
}
.md-shift-header {
margin: 3px 6px;
display: flex;
flex-direction: column;
}
.md-shift-name {
font-size: 15px;
}
.md-shift-time {
opacity: 0.5;
font-size: 12px;
margin-left: 5px;
}
.md-shift-count {
margin-top: 6px;
margin-right: 12px;
display: inline-block;
width: 26px;
height: 20px;
}
.md-shift-icon {
padding-right: 3px;
}