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.

Get started with this example

Demo

Loading the live demo

Preview in full screen

Build a restaurant shift planning interface with the Timeline — named shift columns with live occupancy counts and hierarchical staff groups by role.

Code

View code on GitHub 
<script setup>
import {
  formatDate,
  MbscCalendarNav,
  MbscCalendarNext,
  MbscCalendarPrev,
  MbscCalendarToday,
  MbscCheckbox,
  MbscEventcalendar,
  MbscSelect,
  setOptions 
} from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
})

const myResources = [
  {
    id: 1,
    name: 'Barista',
    icon: '\u2615\uFE0F',
    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: '\uD83C\uDF78',
    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: '\uD83D\uDC69\u200D\uD83C\uDF73',
    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: '\uD83E\uDDF9',
    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: '\uD83C\uDF72',
    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: '\uD83D\uDECE',
    eventCreation: false,
    children: [
      {
        id: 61,
        name: 'Layton Candace',
        color: '#7056ff'
      },
      {
        id: 62,
        name: 'Sylvia Cale',
        color: '#7056ff'
      }
    ]
  },
  {
    id: 7,
    name: 'Managers',
    icon: '\uD83D\uDC69\u200D\uD83D\uDCBC',
    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: '\uD83E\uDD35',
    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: '\uD83C\uDF77',
    eventCreation: false,
    children: [
      {
        id: 91,
        name: 'Yancy Dustin',
        color: '#34c8e0'
      },
      {
        id: 92,
        name: 'Sierra Clark',
        color: '#34c8e0'
      }
    ]
  }
]

const allShifts = [
  // Showing partial data. Download full source.
  {
    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
  }, // Showing partial data. Download full source.
]

const allSlots = [
  {
    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'
  }
]

const views = [
  {
    text: 'Day',
    value: 'day'
  },
  {
    text: 'Week',
    value: 'week'
  }
]

const shifts = ref(allShifts)
const mySlots = ref(allSlots)
const selectedView = ref('week')

const shiftTimes = ref([
  {
    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
  }
])

const myView = ref({
  timeline: {
    type: 'week',
    eventDisplay: 'fill',
    startDay: 1,
    endDay: 5
  }
})

function getEmployeeName(event) {
  for (let i = 0; i < myResources.length; ++i) {
    for (let j = 0; j < myResources[i].children.length; ++j) {
      const employee = myResources[i].children[j]
      if (employee.id === event.resource) {
        return employee.name.substring(0, employee.name.indexOf(' '))
      }
    }
  }
}

function myDefaultEvent(event) {
  return {
    title: getEmployeeName(event)
  }
}

function formatMyDate(date) {
  return formatDate('YYYY-MM-DD', new Date(date))
}

function getShiftsNrs(date, slotId) {
  const shiftList = []

  for (const shift of shifts.value) {
    // Get slot id from resource id
    const resourceNr = +shift.resource.toString().charAt(0)
    if (shift.slot === slotId && date === formatMyDate(shift.start)) {
      shiftList[resourceNr - 1] = (shiftList[resourceNr - 1] || 0) + 1
    }
  }
  return shiftList
}

function checkboxChange(ev) {
  const value = +ev.target.value
  const checked = ev.target.checked
  const filteredSlots = []
  let updatedTimes = shiftTimes.value.map((cs) => (cs.id === value ? { ...cs, checked } : cs))

  for (const slot of allSlots) {
    if (updatedTimes.find((us) => us.id === slot.id && us.checked)) {
      filteredSlots.push(slot)
    }
  }

  if (filteredSlots.length === 1) {
    updatedTimes = updatedTimes.map((ut) => (ut.checked ? { ...ut, disabled: true } : ut))
  } else {
    updatedTimes = updatedTimes.map((ut) => ({ ...ut, disabled: false }))
  }

  mySlots.value = filteredSlots
  shiftTimes.value = updatedTimes
}

function isDouble(event, inst) {
  const date = event.start.setHours(0)
  const events = inst.getEvents(date)
  const ev = events.find(
    (e) =>
      new Date(e.start).setHours(0) === date &&
      e.resource === event.resource &&
      e.slot === event.slot
  )
  return ev
}

function handleEventCreate(args, inst) {
  if (isDouble(args.event, inst)) {
    return false
  } else {
    setTimeout(() => {
      shifts.value = [...shifts.value, args.event]
    })
  }
}

function handleEventUpdate(args, inst) {
  const event = args.event

  if (isDouble(event, inst)) {
    return false
  } else {
    const newName = getEmployeeName(event)
    if (newName) {
      const index = shifts.value.findIndex((x) => x.id === event.id)
      const newShifts = [...shifts.value]
      newShifts[index].title = newName
      shifts.value = newShifts
    }
  }
}

function handleEventDeleted(args) {
  shifts.value = shifts.value.filter((item) => item.id !== args.event.id)
}

function handleViewChange() {
  if (selectedView.value === 'day') {
    myView.value = {
      timeline: {
        type: 'day',
        eventDisplay: 'fill'
      }
    }
  } else {
    myView.value = {
      timeline: {
        type: 'week',
        eventDisplay: 'fill',
        startDay: 1,
        endDay: 5
      }
    }
  }
}
</script>

<template>
  <MbscEventcalendar
    cssClass="md-shift-management-calendar"
    :view="myView"
    :data="shifts"
    :resources="myResources"
    :slots="mySlots"
    :clickToCreate="true"
    :dragToMove="true"
    :extendDefaultEvent="myDefaultEvent"
    @event-create="handleEventCreate"
    @event-update="handleEventUpdate"
    @event-deleted="handleEventDeleted"
  >
    <template #resource="resource">
      <div
        :class="{ 'md-shift-resource ': resource.children }"
        :style="{ color: resource.children ? resource.children[0].color : '' }"
      >
        <span
          v-if="resource.children"
          class="md-shift-resource-icon"
          :innerHTML="resource.icon"
        ></span>
        {{ resource.name }}
      </div>
    </template>
    <template #slot="args">
      <template
        v-for="shifts in [
          {
            date: formatMyDate(args.date),
            list: getShiftsNrs(formatMyDate(args.date), args.slot.id)
          }
        ]"
        :key="shifts.date + '-' + args.slot.id"
      >
        <div class="md-shift-header" v-if="shifts.date">
          <div class="md-shift-name">
            {{ args.slot.name }}
            <span class="md-shift-time">{{ args.slot.time }}</span>
          </div>
          <template v-if="shifts.list.length > 0">
            <div :class="'md-shift-counts-' + shifts.date + '-' + args.slot.id">
              <template v-for="(shift, i) in shifts.list" :key="myResources[i].id">
                <div v-if="shift" class="md-shift-count">
                  <span class="md-shift-icon" :innerHTML="myResources[i].icon"></span>
                  <span
                    :class="
                      'md-shift-nr md-shift-nr-' + shifts.date + '-' + args.slot.id + '-' + (i + 1)
                    "
                  >
                    {{ shift }}
                  </span>
                </div>
                <br v-if="i === 3" />
              </template>
            </div>
          </template>
          <template v-if="shifts.list.length === 0">
            <div class="md-shift-count">{{ '\uD83D\uDE36' }} empty...</div>
          </template>
        </div>
      </template>
    </template>
    <template #header>
      <MbscCalendarNav />
      <div class="mbsc-flex mbsc-flex-1-0 mbsc-justify-content-end">
        <template v-for="st in shiftTimes" :key="st.id">
          <MbscCheckbox
            v-model="st.checked"
            :label="st.name"
            :disabled="st.disabled"
            @change="checkboxChange"
            theme="material"
          />
        </template>
      </div>
      <MbscSelect
        :data="views"
        inputStyle="box"
        v-model="selectedView"
        @change="handleViewChange"
      />
      <div>
        <MbscCalendarPrev />
        <MbscCalendarToday />
        <MbscCalendarNext />
      </div>
    </template>
  </MbscEventcalendar>
</template>

<style>
.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;
}
</style>

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.