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: mobiscroll.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
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
var calendar;
var 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',
},
],
},
];
var data = [
// Showing partial data. Download full source.
{
start: '2026-10-23T02:00',
end: '2026-10-23T10:00',
title: 'Derek',
resource: 21,
slot: 1,
},
{
start: '2026-10-23T02:00',
end: '2026-10-23T10:00',
title: 'Florence',
resource: 46,
slot: 1,
},
{
start: '2026-10-23T08:00',
end: '2026-10-23T12:00',
title: 'Willis',
resource: 12,
slot: 2,
},
{
start: '2026-10-23T08:00',
end: '2026-10-23T12:00',
title: 'Jewell',
resource: 32,
slot: 2,
},
{
start: '2026-10-23T08:00',
end: '2026-10-23T12:00',
title: 'Jenifer',
resource: 42,
slot: 2,
},
{
start: '2026-10-23T08:00',
end: '2026-10-23T12:00',
title: 'Jon',
resource: 52,
slot: 2,
},
{
start: '2026-10-23T08:00',
end: '2026-10-23T12:00',
title: 'Fred',
resource: 71,
slot: 2,
},
{
start: '2026-10-23T08:00',
end: '2026-10-23T12:00',
title: 'Adrianna',
resource: 82,
slot: 2,
},
{
start: '2026-10-23T08:00',
end: '2026-10-23T12:00',
title: 'Jude',
resource: 11,
slot: 3,
},
{
start: '2026-10-23T11:00',
end: '2026-10-23T15:00',
title: 'Jewell',
resource: 32,
slot: 3,
},
{
start: '2026-10-23T11:00',
end: '2026-10-23T15:00',
title: 'Gray',
resource: 45,
slot: 3,
},
{
start: '2026-10-23T11:00',
end: '2026-10-23T15:00',
title: 'Isadora',
resource: 54,
slot: 3,
},
{
start: '2026-10-23T11:00',
end: '2026-10-23T15:00',
title: 'Antonia',
resource: 72,
slot: 3,
},
{
start: '2026-10-23T11:00',
end: '2026-10-23T15:00',
title: 'Adrianna',
resource: 82,
slot: 3,
},
{
start: '2026-10-23T11:00',
end: '2026-10-23T15:00',
title: 'Leon',
resource: 84,
slot: 3,
},
{
start: '2026-10-23T11:00',
end: '2026-10-23T15:00',
title: 'Yancy',
resource: 91,
slot: 3,
},
{
start: '2026-10-23T16:00',
end: '2026-10-23T23:00',
title: 'Ryan',
resource: 13,
slot: 4,
},
{
start: '2026-10-23T16:00',
end: '2026-10-23T23:00',
title: 'Merv',
resource: 22,
slot: 4,
},
{
start: '2026-10-23T16:00',
end: '2026-10-23T23:00',
title: 'Ford',
resource: 31,
slot: 4,
},
{
start: '2026-10-23T16:00',
end: '2026-10-23T23:00',
title: 'Dory',
resource: 33,
slot: 4,
},
{
start: '2026-10-23T16:00',
end: '2026-10-23T23:00',
title: 'Breanne',
resource: 41,
slot: 4,
},
{
start: '2026-10-23T16:00',
end: '2026-10-23T23:00',
title: 'Meredith',
resource: 51,
slot: 4,
},
{
start: '2026-10-23T16:00',
end: '2026-10-23T23:00',
title: 'Carlyn',
resource: 53,
slot: 4,
},
{
start: '2026-10-23T16:00',
end: '2026-10-23T23:00',
title: 'Layton',
resource: 61,
slot: 4,
},
{
start: '2026-10-23T16:00',
end: '2026-10-23T23:00',
title: 'Gerry',
resource: 73,
slot: 4,
},
{
start: '2026-10-23T16:00',
end: '2026-10-23T23:00',
title: 'Reg',
resource: 81,
slot: 4,
},
{
start: '2026-10-23T16:00',
end: '2026-10-23T23:00',
title: 'Lou',
resource: 83,
slot: 4,
},
{
start: '2026-10-23T16:00',
end: '2026-10-23T23:00',
title: 'Sierra',
resource: 92,
slot: 4,
},
{
start: '2026-10-23T11:00',
end: '2026-10-23T11:59',
title: 'Derek',
resource: 21,
slot: 5,
},
{
start: '2026-10-23T11:00',
end: '2026-10-23T11:59',
title: 'Natalie',
resource: 43,
slot: 5,
},
{
start: '2026-10-23T11:00',
end: '2026-10-23T11:59',
title: 'Kaylin',
resource: 44,
slot: 5,
},
{
start: '2026-10-23T11:00',
end: '2026-10-23T11:59',
title: 'Fred',
resource: 71,
slot: 5,
},
{
start: '2026-10-24T02:00',
end: '2026-10-24T10:00',
title: 'Theo',
resource: 23,
slot: 1,
},
{
start: '2026-10-24T02:00',
end: '2026-10-24T10:00',
title: 'Jenifer',
resource: 42,
slot: 1,
},
{
start: '2026-10-24T08:00',
end: '2026-10-24T12:00',
title: 'Jude',
resource: 11,
slot: 2,
},
{
start: '2026-10-24T08:00',
end: '2026-10-24T12:00',
title: 'Jewell',
resource: 32,
slot: 2,
},
{
start: '2026-10-24T08:00',
end: '2026-10-24T12:00',
title: 'Florence',
resource: 46,
slot: 2,
},
{
start: '2026-10-24T08:00',
end: '2026-10-24T12:00',
title: 'Jon',
resource: 52,
slot: 2,
},
{
start: '2026-10-24T08:00',
end: '2026-10-24T12:00',
title: 'Gerry',
resource: 73,
slot: 2,
},
{
start: '2026-10-24T08:00',
end: '2026-10-24T12:00',
title: 'Adrianna',
resource: 82,
slot: 2,
},
{
start: '2026-10-24T08:00',
end: '2026-10-24T12:00',
title: 'Jude',
resource: 11,
slot: 3,
},
{
start: '2026-10-24T11:00',
end: '2026-10-24T15:00',
title: 'Dory',
resource: 33,
slot: 3,
},
{
start: '2026-10-24T11:00',
end: '2026-10-24T15:00',
title: 'Natalie',
resource: 43,
slot: 3,
},
{
start: '2026-10-24T11:00',
end: '2026-10-24T15:00',
title: 'Meredith',
resource: 51,
slot: 3,
},
{
start: '2026-10-24T11:00',
end: '2026-10-24T15:00',
title: 'Fred',
resource: 71,
slot: 3,
},
{
start: '2026-10-24T11:00',
end: '2026-10-24T15:00',
title: 'Lou',
resource: 83,
slot: 3,
},
{
start: '2026-10-24T11:00',
end: '2026-10-24T15:00',
title: 'Leon',
resource: 84,
slot: 3,
},
{
start: '2026-10-24T11:00',
end: '2026-10-24T15:00',
title: 'Sierra',
resource: 92,
slot: 3,
},
{
start: '2026-10-24T16:00',
end: '2026-10-24T23:00',
title: 'Willis',
resource: 12,
slot: 4,
},
{
start: '2026-10-24T16:00',
end: '2026-10-24T23:00',
title: 'Derek',
resource: 21,
slot: 4,
},
{
start: '2026-10-24T16:00',
end: '2026-10-24T23:00',
title: 'Ford',
resource: 31,
slot: 4,
},
{
start: '2026-10-24T16:00',
end: '2026-10-24T23:00',
title: 'Dory',
resource: 33,
slot: 4,
},
{
start: '2026-10-24T16:00',
end: '2026-10-24T23:00',
title: 'Kaylin',
resource: 44,
slot: 4,
},
{
start: '2026-10-24T16:00',
end: '2026-10-24T23:00',
title: 'Meredith',
resource: 51,
slot: 4,
},
{
start: '2026-10-24T16:00',
end: '2026-10-24T23:00',
title: 'Isadora',
resource: 54,
slot: 4,
},
{
start: '2026-10-24T16:00',
end: '2026-10-24T23:00',
title: 'Sylvia',
resource: 62,
slot: 4,
},
{
start: '2026-10-24T16:00',
end: '2026-10-24T23:00',
title: 'Antonia',
resource: 72,
slot: 4,
},
{
start: '2026-10-24T16:00',
end: '2026-10-24T23:00',
title: 'Reg',
resource: 81,
slot: 4,
},
{
start: '2026-10-24T16:00',
end: '2026-10-24T23:00',
title: 'Lou',
resource: 83,
slot: 4,
},
{
start: '2026-10-24T16:00',
end: '2026-10-24T23:00',
title: 'Sierra',
resource: 92,
slot: 4,
},
{
start: '2026-10-24T11:00',
end: '2026-10-24T11:59',
title: 'Derek',
resource: 21,
slot: 5,
},
{
start: '2026-10-24T11:00',
end: '2026-10-24T11:59',
title: 'Natalie',
resource: 43,
slot: 5,
},
{
start: '2026-10-24T11:00',
end: '2026-10-24T11:59',
title: 'Kaylin',
resource: 44,
slot: 5,
},
{
start: '2026-10-24T11:00',
end: '2026-10-24T11:59',
title: 'Fred',
resource: 71,
slot: 5,
},
{
start: '2026-10-25T02:00',
end: '2026-10-25T10:00',
title: 'Merv',
resource: 22,
slot: 1,
},
{
start: '2026-10-25T02:00',
end: '2026-10-25T10:00',
title: 'Florence',
resource: 46,
slot: 1,
},
{
start: '2026-10-25T08:00',
end: '2026-10-25T12:00',
title: 'Ryan',
resource: 13,
slot: 2,
},
{
start: '2026-10-25T08:00',
end: '2026-10-25T12:00',
title: 'Jewell',
resource: 32,
slot: 2,
},
{
start: '2026-10-25T08:00',
end: '2026-10-25T12:00',
title: 'Florence',
resource: 46,
slot: 2,
},
{
start: '2026-10-25T08:00',
end: '2026-10-25T12:00',
title: 'Carlyn',
resource: 53,
slot: 2,
},
{
start: '2026-10-25T08:00',
end: '2026-10-25T12:00',
title: 'Fred',
resource: 71,
slot: 2,
},
{
start: '2026-10-25T08:00',
end: '2026-10-25T12:00',
title: 'Leon',
resource: 84,
slot: 2,
},
{
start: '2026-10-25T08:00',
end: '2026-10-25T12:00',
title: 'Jude',
resource: 11,
slot: 3,
},
{
start: '2026-10-25T11:00',
end: '2026-10-25T15:00',
title: 'Ford',
resource: 31,
slot: 3,
},
{
start: '2026-10-25T11:00',
end: '2026-10-25T15:00',
title: 'Natalie',
resource: 43,
slot: 3,
},
{
start: '2026-10-25T11:00',
end: '2026-10-25T15:00',
title: 'Carlyn',
resource: 53,
slot: 3,
},
{
start: '2026-10-25T11:00',
end: '2026-10-25T15:00',
title: 'Gerry',
resource: 73,
slot: 3,
},
{
start: '2026-10-25T11:00',
end: '2026-10-25T15:00',
title: 'Lou',
resource: 83,
slot: 3,
},
{
start: '2026-10-25T11:00',
end: '2026-10-25T15:00',
title: 'Leon',
resource: 84,
slot: 3,
},
{
start: '2026-10-25T11:00',
end: '2026-10-25T15:00',
title: 'Yancy',
resource: 91,
slot: 3,
},
{
start: '2026-10-25T16:00',
end: '2026-10-25T23:00',
title: 'Willis',
resource: 12,
slot: 4,
},
{
start: '2026-10-25T16:00',
end: '2026-10-25T23:00',
title: 'Merv',
resource: 22,
slot: 4,
},
{
start: '2026-10-25T16:00',
end: '2026-10-25T23:00',
title: 'Jewell',
resource: 32,
slot: 4,
},
{
start: '2026-10-25T16:00',
end: '2026-10-25T23:00',
title: 'Dory',
resource: 33,
slot: 4,
},
{
start: '2026-10-25T16:00',
end: '2026-10-25T23:00',
title: 'Gray',
resource: 45,
slot: 4,
},
{
start: '2026-10-25T16:00',
end: '2026-10-25T23:00',
title: 'Jon',
resource: 52,
slot: 4,
},
{
start: '2026-10-25T16:00',
end: '2026-10-25T23:00',
title: 'Isadora',
resource: 54,
slot: 4,
},
{
start: '2026-10-25T16:00',
end: '2026-10-25T23:00',
title: 'Layton',
resource: 61,
slot: 4,
},
{
start: '2026-10-25T16:00',
end: '2026-10-25T23:00',
title: 'Antonia',
resource: 72,
slot: 4,
},
{
start: '2026-10-25T16:00',
end: '2026-10-25T23:00',
title: 'Reg',
resource: 81,
slot: 4,
},
{
start: '2026-10-25T16:00',
end: '2026-10-25T23:00',
title: 'Lou',
resource: 83,
slot: 4,
},
{
start: '2026-10-25T16:00',
end: '2026-10-25T23:00',
title: 'Sierra',
resource: 92,
slot: 4,
},
{
start: '2026-10-25T11:00',
end: '2026-10-25T11:59',
title: 'Derek',
resource: 21,
slot: 5,
},
{
start: '2026-10-25T11:00',
end: '2026-10-25T11:59',
title: 'Natalie',
resource: 43,
slot: 5,
},
{
start: '2026-10-25T11:00',
end: '2026-10-25T11:59',
title: 'Kaylin',
resource: 44,
slot: 5,
},
{
start: '2026-10-25T11:00',
end: '2026-10-25T11:59',
title: 'Fred',
resource: 71,
slot: 5,
},
{
start: '2026-10-26T02:00',
end: '2026-10-26T10:00',
title: 'Derek',
resource: 21,
slot: 1,
},
{
start: '2026-10-26T02:00',
end: '2026-10-26T10:00',
title: 'Florence',
resource: 46,
slot: 1,
},
{
start: '2026-10-26T08:00',
end: '2026-10-26T12:00',
title: 'Willis',
resource: 12,
slot: 2,
},
{
start: '2026-10-26T08:00',
end: '2026-10-26T12:00',
title: 'Jewell',
resource: 32,
slot: 2,
},
{
start: '2026-10-26T08:00',
end: '2026-10-26T12:00',
title: 'Jenifer',
resource: 42,
slot: 2,
},
{
start: '2026-10-26T08:00',
end: '2026-10-26T12:00',
title: 'Jon',
resource: 52,
slot: 2,
},
{
start: '2026-10-26T08:00',
end: '2026-10-26T12:00',
title: 'Fred',
resource: 71,
slot: 2,
},
{
start: '2026-10-26T08:00',
end: '2026-10-26T12:00',
title: 'Adrianna',
resource: 82,
slot: 2,
},
{
start: '2026-10-26T08:00',
end: '2026-10-26T12:00',
title: 'Jude',
resource: 11,
slot: 3,
},
{
start: '2026-10-26T11:00',
end: '2026-10-26T15:00',
title: 'Jewell',
resource: 32,
slot: 3,
},
{
start: '2026-10-26T11:00',
end: '2026-10-26T15:00',
title: 'Gray',
resource: 45,
slot: 3,
},
{
start: '2026-10-26T11:00',
end: '2026-10-26T15:00',
title: 'Isadora',
resource: 54,
slot: 3,
},
{
start: '2026-10-26T11:00',
end: '2026-10-26T15:00',
title: 'Antonia',
resource: 72,
slot: 3,
},
{
start: '2026-10-26T11:00',
end: '2026-10-26T15:00',
title: 'Adrianna',
resource: 82,
slot: 3,
},
{
start: '2026-10-26T11:00',
end: '2026-10-26T15:00',
title: 'Leon',
resource: 84,
slot: 3,
},
{
start: '2026-10-26T11:00',
end: '2026-10-26T15:00',
title: 'Yancy',
resource: 91,
slot: 3,
},
{
start: '2026-10-26T16:00',
end: '2026-10-26T23:00',
title: 'Ryan',
resource: 13,
slot: 4,
},
{
start: '2026-10-26T16:00',
end: '2026-10-26T23:00',
title: 'Merv',
resource: 22,
slot: 4,
},
{
start: '2026-10-26T16:00',
end: '2026-10-26T23:00',
title: 'Ford',
resource: 31,
slot: 4,
},
{
start: '2026-10-26T16:00',
end: '2026-10-26T23:00',
title: 'Dory',
resource: 33,
slot: 4,
},
{
start: '2026-10-26T16:00',
end: '2026-10-26T23:00',
title: 'Breanne',
resource: 41,
slot: 4,
},
{
start: '2026-10-26T16:00',
end: '2026-10-26T23:00',
title: 'Meredith',
resource: 51,
slot: 4,
},
{
start: '2026-10-26T16:00',
end: '2026-10-26T23:00',
title: 'Carlyn',
resource: 53,
slot: 4,
},
{
start: '2026-10-26T16:00',
end: '2026-10-26T23:00',
title: 'Layton',
resource: 61,
slot: 4,
},
{
start: '2026-10-26T16:00',
end: '2026-10-26T23:00',
title: 'Gerry',
resource: 73,
slot: 4,
},
{
start: '2026-10-26T16:00',
end: '2026-10-26T23:00',
title: 'Reg',
resource: 81,
slot: 4,
},
{
start: '2026-10-26T16:00',
end: '2026-10-26T23:00',
title: 'Lou',
resource: 83,
slot: 4,
},
{
start: '2026-10-26T16:00',
end: '2026-10-26T23:00',
title: 'Sierra',
resource: 92,
slot: 4,
},
{
start: '2026-10-26T11:00',
end: '2026-10-26T11:59',
title: 'Derek',
resource: 21,
slot: 5,
},
{
start: '2026-10-26T11:00',
end: '2026-10-26T11:59',
title: 'Natalie',
resource: 43,
slot: 5,
},
{
start: '2026-10-26T11:00',
end: '2026-10-26T11:59',
title: 'Kaylin',
resource: 44,
slot: 5,
},
{
start: '2026-10-26T11:00',
end: '2026-10-26T11:59',
title: 'Fred',
resource: 71,
slot: 5,
},
{
start: '2026-10-27T02:00',
end: '2026-10-27T10:00',
title: 'Theo',
resource: 23,
slot: 1,
},
{
start: '2026-10-27T02:00',
end: '2026-10-27T10:00',
title: 'Jenifer',
resource: 42,
slot: 1,
},
{
start: '2026-10-27T08:00',
end: '2026-10-27T12:00',
title: 'Jude',
resource: 11,
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: 'Florence',
resource: 46,
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: 'Gerry',
resource: 73,
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: 'Dory',
resource: 33,
slot: 3,
},
{
start: '2026-10-27T11:00',
end: '2026-10-27T15:00',
title: 'Natalie',
resource: 43,
slot: 3,
},
{
start: '2026-10-27T11:00',
end: '2026-10-27T15:00',
title: 'Meredith',
resource: 51,
slot: 3,
},
{
start: '2026-10-27T11:00',
end: '2026-10-27T15:00',
title: 'Fred',
resource: 71,
slot: 3,
},
{
start: '2026-10-27T11:00',
end: '2026-10-27T15:00',
title: 'Lou',
resource: 83,
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: 'Sierra',
resource: 92,
slot: 3,
},
{
start: '2026-10-27T16:00',
end: '2026-10-27T23:00',
title: 'Willis',
resource: 12,
slot: 4,
},
{
start: '2026-10-27T16:00',
end: '2026-10-27T23:00',
title: 'Derek',
resource: 21,
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: 'Kaylin',
resource: 44,
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: 'Isadora',
resource: 54,
slot: 4,
},
{
start: '2026-10-27T16:00',
end: '2026-10-27T23:00',
title: 'Sylvia',
resource: 62,
slot: 4,
},
{
start: '2026-10-27T16:00',
end: '2026-10-27T23:00',
title: 'Antonia',
resource: 72,
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,
}, //</hide-comment>
];
var slots = [
{
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',
},
];
calendar = mobiscroll.eventcalendar('#demo-restaurant-shift-management', {
view: {
timeline: {
type: 'week',
eventDisplay: 'fill',
startDay: 1,
endDay: 5,
},
},
data: data,
resources: resources,
slots: slots,
clickToCreate: true,
dragToMove: true,
renderSlot: function (args) {
var slot = args.slot;
var date = formatDate(args.date);
var shiftsElm = '';
var shiftList = getShiftsNrs(date, slot.id);
var length = 0;
if (shiftList.length > 0) {
for (var i = 0; i < shiftList.length; ++i) {
if (shiftList[i]) {
shiftsElm +=
'<div class="md-shift-count">' +
'<span class="md-shift-icon">' +
resources[i].icon +
'</span>' +
'<span class="md-shift-nr md-shift-nr-' +
date +
'-' +
slot.id +
'-' +
(i + 1) +
'">' +
shiftList[i] +
'</span></div>' +
(length === 3 ? '<br />' : '');
++length;
}
}
} else {
shiftsElm += '<div class="md-shift-count">😶 empty...</div>';
}
return (
'<div class="md-shift-header">' +
'<div class="md-shift-name">' +
slot.name +
'<span class="md-shift-time">' +
slot.time +
'</span></div>' +
'<div class="md-shift-counts-' +
date +
'-' +
slot.id +
'">' +
shiftsElm +
'</div></div>'
);
},
renderHeader: function () {
return (
'<div mbsc-calendar-nav></div>' +
'<div class="mbsc-flex mbsc-flex-1-0 mbsc-justify-content-end">' +
'<label>Night' +
'<input mbsc-checkbox type="checkbox" data-theme="material" class="md-shift-filter" value="1" checked>' +
'</label>' +
'<label>Breakfast' +
'<input mbsc-checkbox type="checkbox" data-theme="material" class="md-shift-filter" value="2" checked>' +
'</label>' +
'<label>Lunch' +
'<input mbsc-checkbox type="checkbox" data-theme="material" class="md-shift-filter" value="3" checked>' +
'</label>' +
'<label>Dinner' +
'<input mbsc-checkbox type="checkbox" data-theme="material" class="md-shift-filter" value="4" checked>' +
'</label>' +
'<label>After hours' +
'<input mbsc-checkbox type="checkbox" data-theme="material" class="md-shift-filter" value="5" checked>' +
'</label>' +
'<label>' +
'<input mbsc-input id="shift-management-view" data-dropdown="true" data-input-style="box" />' +
'</label>' +
'<select id="shift-management-select">' +
'<option value="day">Day</option>' +
'<option value="week" selected>Week</option>' +
'</select>' +
'</div>' +
'<div mbsc-calendar-prev></div>' +
'<div mbsc-calendar-today></div>' +
'<div mbsc-calendar-next></div>'
);
},
renderResource: function (resource) {
var parent = resource.children;
return (
'<div class="' +
(parent ? 'md-shift-resource' : '') +
'" style="color:' +
(parent ? parent[0].color : '') +
'">' +
(parent ? '<span class="md-shift-resource-icon">' + resource.icon + '</span>' : '') +
resource.name +
'</div>'
);
},
extendDefaultEvent: function (event) {
return {
title: getEmployeeName(event),
};
},
onEventCreate: function (args, inst) {
return addUpdateEvent(args.event, inst);
},
onEventUpdate: function (args, inst) {
var event = Object.assign({}, args.event);
if (addUpdateEvent(event, inst)) {
event.title = getEmployeeName(event);
if (event.title) {
inst.updateEvent(event);
}
} else {
return false;
}
},
});
function addUpdateEvent(event, inst) {
var date = event.start.setHours(0);
var events = inst.getEvents(date);
var ev = events.find(function (e) {
return new Date(e.start).setHours(0) === date && e.resource === event.resource && e.slot === event.slot;
});
return ev ? false : true;
}
function getEmployeeName(event) {
for (var i = 0; i < resources.length; ++i) {
for (var j = 0; j < resources[i].children.length; ++j) {
var employee = resources[i].children[j];
if (employee.id === event.resource) {
return employee.name.substring(0, employee.name.indexOf(' '));
}
}
}
}
function getShiftsNrs(date, slotId) {
var shifts = calendar ? calendar.getEvents(date) : data;
var shiftNrs = [];
for (var i = 0; i < shifts.length; ++i) {
var shift = shifts[i];
// Get slot id from resource id
var resourceNr = +shift.resource.toString().charAt(0);
if (shift.slot == slotId && date == formatDate(shift.start)) {
shiftNrs[resourceNr - 1] = (shiftNrs[resourceNr - 1] || 0) + 1;
}
}
return shiftNrs;
}
function formatDate(date) {
return mobiscroll.formatDate('YYYY-MM-DD', new Date(date));
}
mobiscroll.select('#shift-management-select', {
inputElement: document.getElementById('shift-management-view'),
touchUi: false,
onChange: function (args) {
if (args.value == 'day') {
calendar.setOptions({
view: {
timeline: {
type: 'day',
eventDisplay: 'fill',
},
},
});
} else {
calendar.setOptions({
view: {
timeline: {
type: 'week',
eventDisplay: 'fill',
startDay: 1,
endDay: 5,
},
},
});
}
},
});
document.querySelectorAll('.md-shift-filter').forEach(function (elm) {
elm.addEventListener('change', function () {
var selected = [];
var displayedSlots = [];
document.querySelectorAll('.md-shift-filter:checked').forEach(function (el) {
selected.push(+el.value);
mobiscroll.getInst(el).setOptions({ disabled: false });
});
for (var i = 0; i < slots.length; ++i) {
var slot = slots[i];
if (selected.indexOf(slot.id) > -1) {
displayedSlots.push(slot);
}
}
if (selected.length === 1) {
var lastElm = document.querySelectorAll('.md-shift-filter[value="' + selected[0] + '"]')[0];
mobiscroll.getInst(lastElm).setOptions({ disabled: true });
}
calendar.setOptions({ slots: displayedSlots });
});
});
<div id="demo-restaurant-shift-management" class="md-shift-management-calendar"></div>
.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: .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;
}