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: ' '
});
$(function () {
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-11-02T02:00',
end: '2026-11-02T10:00',
title: 'Derek',
resource: 21,
slot: 1,
},
{
start: '2026-11-02T02:00',
end: '2026-11-02T10:00',
title: 'Florence',
resource: 46,
slot: 1,
},
{
start: '2026-11-02T08:00',
end: '2026-11-02T12:00',
title: 'Willis',
resource: 12,
slot: 2,
},
{
start: '2026-11-02T08:00',
end: '2026-11-02T12:00',
title: 'Jewell',
resource: 32,
slot: 2,
},
{
start: '2026-11-02T08:00',
end: '2026-11-02T12:00',
title: 'Jenifer',
resource: 42,
slot: 2,
},
{
start: '2026-11-02T08:00',
end: '2026-11-02T12:00',
title: 'Jon',
resource: 52,
slot: 2,
},
{
start: '2026-11-02T08:00',
end: '2026-11-02T12:00',
title: 'Fred',
resource: 71,
slot: 2,
},
{
start: '2026-11-02T08:00',
end: '2026-11-02T12:00',
title: 'Adrianna',
resource: 82,
slot: 2,
},
{
start: '2026-11-02T08:00',
end: '2026-11-02T12:00',
title: 'Jude',
resource: 11,
slot: 3,
},
{
start: '2026-11-02T11:00',
end: '2026-11-02T15:00',
title: 'Jewell',
resource: 32,
slot: 3,
},
{
start: '2026-11-02T11:00',
end: '2026-11-02T15:00',
title: 'Gray',
resource: 45,
slot: 3,
},
{
start: '2026-11-02T11:00',
end: '2026-11-02T15:00',
title: 'Isadora',
resource: 54,
slot: 3,
},
{
start: '2026-11-02T11:00',
end: '2026-11-02T15:00',
title: 'Antonia',
resource: 72,
slot: 3,
},
{
start: '2026-11-02T11:00',
end: '2026-11-02T15:00',
title: 'Adrianna',
resource: 82,
slot: 3,
},
{
start: '2026-11-02T11:00',
end: '2026-11-02T15:00',
title: 'Leon',
resource: 84,
slot: 3,
},
{
start: '2026-11-02T11:00',
end: '2026-11-02T15:00',
title: 'Yancy',
resource: 91,
slot: 3,
},
{
start: '2026-11-02T16:00',
end: '2026-11-02T23:00',
title: 'Ryan',
resource: 13,
slot: 4,
},
{
start: '2026-11-02T16:00',
end: '2026-11-02T23:00',
title: 'Merv',
resource: 22,
slot: 4,
},
{
start: '2026-11-02T16:00',
end: '2026-11-02T23:00',
title: 'Ford',
resource: 31,
slot: 4,
},
{
start: '2026-11-02T16:00',
end: '2026-11-02T23:00',
title: 'Dory',
resource: 33,
slot: 4,
},
{
start: '2026-11-02T16:00',
end: '2026-11-02T23:00',
title: 'Breanne',
resource: 41,
slot: 4,
},
{
start: '2026-11-02T16:00',
end: '2026-11-02T23:00',
title: 'Meredith',
resource: 51,
slot: 4,
},
{
start: '2026-11-02T16:00',
end: '2026-11-02T23:00',
title: 'Carlyn',
resource: 53,
slot: 4,
},
{
start: '2026-11-02T16:00',
end: '2026-11-02T23:00',
title: 'Layton',
resource: 61,
slot: 4,
},
{
start: '2026-11-02T16:00',
end: '2026-11-02T23:00',
title: 'Gerry',
resource: 73,
slot: 4,
},
{
start: '2026-11-02T16:00',
end: '2026-11-02T23:00',
title: 'Reg',
resource: 81,
slot: 4,
},
{
start: '2026-11-02T16:00',
end: '2026-11-02T23:00',
title: 'Lou',
resource: 83,
slot: 4,
},
{
start: '2026-11-02T16:00',
end: '2026-11-02T23:00',
title: 'Sierra',
resource: 92,
slot: 4,
},
{
start: '2026-11-02T11:00',
end: '2026-11-02T11:59',
title: 'Derek',
resource: 21,
slot: 5,
},
{
start: '2026-11-02T11:00',
end: '2026-11-02T11:59',
title: 'Natalie',
resource: 43,
slot: 5,
},
{
start: '2026-11-02T11:00',
end: '2026-11-02T11:59',
title: 'Kaylin',
resource: 44,
slot: 5,
},
{
start: '2026-11-02T11:00',
end: '2026-11-02T11:59',
title: 'Fred',
resource: 71,
slot: 5,
}, // Showing partial data. Download full source.
];
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 = $('#demo-restaurant-shift-management')
.mobiscroll()
.eventcalendar({
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 = $.extend({}, args.event);
if (addUpdateEvent(event, inst)) {
event.title = getEmployeeName(event);
if (event.title) {
inst.updateEvent(event);
}
} else {
return false;
}
},
})
.mobiscroll('getInst');
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));
}
$('#shift-management-select')
.mobiscroll()
.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,
},
},
});
}
},
});
$('.md-shift-filter').change(function () {
var selected = [];
var displayedSlots = [];
$('.md-shift-filter:checked').each(function () {
selected.push(+$(this).val());
$(this).mobiscroll('getInst').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) {
$('.md-shift-filter[value=' + selected[0] + ']')
.mobiscroll('getInst')
.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;
}