Employee Shift Scheduling

Use the summary mode of the timeline view with eventDisplay: 'fill' that can be configured under the timeline settings of the view option.

This will give you summarized daily events similar to the event calendar labels where each event is printed under the appropriate day, time slot (shift) for the appropriate resource one after the other.

Build a custom add/edit dialog with the necessary fields. The event dialog can be fully custom as seen in this CRUD example.

Customize the dialog header with a custom header template using the header template slot.

Get started with this example

Demo

Loading the live demo

Preview in full screen

Plan employee shifts on a Timeline — show workers as resource rows with morning and afternoon slots, and manage shifts with a custom add/edit dialog.

Code

View code on GitHub 
<script setup>
import {
  formatDate,
  MbscButton,
  MbscDatepicker,
  MbscEventcalendar,
  MbscInput,
  MbscPopup,
  MbscSnackbar,
  MbscTextarea,
  MbscToast,
  setOptions 
} from '@mobiscroll/vue'
import { ref } from 'vue'

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

const deletedShift = ref()
const isEdit = ref(false)
const isPopupOpen = ref(false)
const isSnackbarOpen = ref(false)
const isToastOpen = ref(false)
const minTime = ref('')
const maxTime = ref('')
const headerPrimary = ref('')
const headerDate = ref('')
const popupButtons = ref([])
const startInput = ref(null)
const endInput = ref(null)
const shift = ref()
const shiftDates = ref([])
const shiftNotes = ref('')
const toastMessage = ref('')

const popupResponsive = {
  medium: {
    display: 'center',
    fullScreen: false,
    touchUi: false,
    width: 400
  }
}

const snackbarButton = {
  action: () => {
    shifts.value = [...shifts.value, deletedShift.value]
  },
  text: 'Undo'
}

const staff = [
  {
    id: 1,
    name: 'Ryan',
    color: '#e20000',
    title: 'Cloud System Engineer',
    img: 'https://img.mobiscroll.com/demos/m1.png'
  },
  {
    id: 2,
    name: 'Kate',
    color: '#60e81a',
    title: 'Help Desk Specialist',
    img: 'https://img.mobiscroll.com/demos/f1.png'
  },
  {
    id: 3,
    name: 'John',
    color: '#3ba7ff',
    title: 'Application Developer',
    img: 'https://img.mobiscroll.com/demos/m2.png'
  },
  {
    id: 4,
    name: 'Mark',
    color: '#e25dd2',
    title: 'Network Administrator',
    img: 'https://img.mobiscroll.com/demos/m3.png'
  },
  {
    id: 5,
    name: 'Sharon',
    color: '#f1e920',
    title: 'Data Quality Manager',
    img: 'https://img.mobiscroll.com/demos/f2.png'
  },
  {
    id: 6,
    name: 'Emma',
    color: '#1ac38d',
    title: 'Product Tactics Agent',
    img: 'https://img.mobiscroll.com/demos/f3.png'
  },
  {
    id: 7,
    name: 'Michael',
    color: '#f18a1a',
    title: 'UX Designer',
    img: 'https://img.mobiscroll.com/demos/m4.png'
  },
  {
    id: 8,
    name: 'Laura',
    color: '#7b61ff',
    title: 'DevOps Engineer',
    img: 'https://img.mobiscroll.com/demos/f4.png'
  }
]

const shifts = ref([
  {
    start: '2026-10-21T07:00',
    end: '2026-10-21T13:00',
    title: '07:00 - 13:00',
    resource: 1,
    slot: 1
  },
  {
    start: '2026-10-21T07:00',
    end: '2026-10-21T13:00',
    title: '07:00 - 13:00',
    resource: 7,
    slot: 1
  },
  {
    start: '2026-10-21T12:00',
    end: '2026-10-21T18:00',
    title: '12:00 - 18:00',
    resource: 3,
    slot: 2
  },
  {
    start: '2026-10-21T12:00',
    end: '2026-10-21T18:00',
    title: '12:00 - 18:00',
    resource: 8,
    slot: 2
  },
  {
    start: '2026-10-22T07:00',
    end: '2026-10-22T13:00',
    title: '07:00 - 13:00',
    resource: 4,
    slot: 1
  },
  // Showing partial data. Download full source.
])

const mySlots = [
  { id: 1, name: 'Morning' },
  { id: 2, name: 'Afternoon' }
]

const myInvalids = [
  {
    start: '2026-10-26T00:00',
    end: '2026-10-26T23:59',
    resource: 4,
    slot: 1
  },
  {
    start: '2026-10-24T00:00',
    end: '2026-10-24T23:59',
    resource: 2,
    slot: 2
  }
]

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

function getShiftTimes(event) {
  const d = event.start
  const start = new Date(d.getFullYear(), d.getMonth(), d.getDate(), event.slot === 1 ? 7 : 12)
  const end = new Date(d.getFullYear(), d.getMonth(), d.getDate(), event.slot === 1 ? 13 : 18)

  return {
    title: formatDate('HH:mm', start) + ' - ' + formatDate('HH:mm', end),
    start: start,
    end: end
  }
}

function fillPopup(event, edit) {
  isEdit.value = edit
  minTime.value = event.slot === 1 ? '07:00' : '12:00'
  maxTime.value = event.slot === 1 ? '13:00' : '18:00'
  shift.value = event
  shiftDates.value = [new Date(event.start), new Date(event.end)]
  shiftNotes.value = event.notes
}

function deleteEvent(event) {
  shifts.value = shifts.value.filter((item) => item.id !== event.id)
  deletedShift.value = event
  isSnackbarOpen.value = true
}

function updateEvent(event) {
  const index = shifts.value.findIndex((s) => s.id === event.id)
  const newShifts = [...shifts.value]

  newShifts.splice(index, 1, event)

  shifts.value = newShifts
}

function saveEvent(event) {
  const dates = shiftDates.value
  const start = dates[0]
  const end = dates[1] ? dates[1] : dates[0]

  const shiftStart = new Date(event.start)
  const shiftEnd = new Date(event.end)

  shiftStart.setHours(start.getHours(), start.getMinutes(), 0, 0)
  shiftEnd.setHours(end.getHours(), end.getMinutes(), 0, 0)

  event.start = shiftStart
  event.end = shiftEnd
  event.title = formatDate('HH:mm', start) + ' - ' + formatDate('HH:mm', end)
  event.notes = shiftNotes.value

  if (isEdit.value) {
    updateEvent(event)
  } else {
    // Add the new event to the list
    shifts.value = [...shifts.value, event]
  }
  isPopupOpen.value = false
}

function handleEventClick(args) {
  const event = args.event
  const resource = args.resourceObj
  const slot = args.slotObj

  fillPopup(event, true)
  popupButtons.value = [
    'cancel',
    {
      handler: () => {
        saveEvent(event)
      },
      keyCode: 'enter',
      text: 'Save',
      cssClass: 'mbsc-popup-button-primary'
    }
  ]
  headerPrimary.value = 'Edit ' + resource.name + "'s hours"
  headerDate.value =
    formatDate('DDDD', new Date(event.start)) +
    ' ' +
    slot.name +
    ', ' +
    formatDate('D MMMM YYYY', new Date(event.start))
  isPopupOpen.value = true
}

function handleEventCreated(args) {
  const event = args.event
  const slot = args.slotObj

  fillPopup(event, false)
  popupButtons.value = [
    'cancel',
    {
      handler: () => {
        saveEvent(event)
      },
      keyCode: 'enter',
      text: 'Add',
      cssClass: 'mbsc-popup-button-primary'
    }
  ]
  headerPrimary.value = 'New shift'
  headerDate.value =
    formatDate('DDDD', new Date(event.start)) +
    ' ' +
    slot.name +
    ', ' +
    formatDate('D MMMM YYYY', new Date(event.start))
  isPopupOpen.value = true
}

function handleEventCreateFailed() {
  toastMessage.value = "Can't create shift"
  isToastOpen.value = true
}

function handleEventDeleted(args) {
  deleteEvent(args.event)
}

function handleEventUpdated(args) {
  const shift = args.event
  if (shift.slot !== args.oldEvent.slot) {
    const data = getShiftTimes(shift)
    shift.start = data.start
    shift.end = data.end
    shift.title = data.title
    updateEvent(shift)
  }
}

function handleEventUpdateFailed() {
  toastMessage.value = "Can't move shift"
  isToastOpen.value = true
}

function handlePopupClose() {
  if (!isEdit.value) {
    // Remove event if popup is cancelled
    shifts.value = [...shifts.value]
  }
  isPopupOpen.value = false
}

function handleShiftDeleteClick() {
  deleteEvent(shift.value)
  isPopupOpen.value = false
}
</script>

<template>
  <MbscEventcalendar
    cssClass="mds-employee-shifts"
    :clickToCreate="true"
    :dragToCreate="false"
    :dragToResize="false"
    :dragToMove="true"
    :data="shifts"
    :eventOverlap="false"
    :extendDefaultEvent="getShiftTimes"
    :invalid="myInvalids"
    :resources="staff"
    :slots="mySlots"
    :view="myView"
    @event-click="handleEventClick"
    @event-created="handleEventCreated"
    @event-create-failed="handleEventCreateFailed"
    @event-deleted="handleEventDeleted"
    @event-updated="handleEventUpdated"
    @event-update-failed="handleEventUpdateFailed"
  >
    <template #resource="resource">
      <div class="mbsc-flex">
        <img class="mds-employee-shifts-avatar" :alt="resource.name" :src="resource.img" />
        <div class="mds-employee-shifts-cont">
          <div class="mds-employee-shifts-name">{{ resource.name }}</div>
          <div class="mds-employee-shifts-title">{{ resource.title }}</div>
        </div>
      </div>
    </template>
  </MbscEventcalendar>
  <MbscPopup
    display="bottom"
    :buttons="popupButtons"
    :contentPadding="false"
    :fullScreen="true"
    :isOpen="isPopupOpen"
    :responsive="popupResponsive"
    :scrollLock="false"
    @close="handlePopupClose"
  >
    <template #header>
      <div class="mds-employee-shifts-header-primary">{{ headerPrimary }}</div>
      <div class="mds-employee-shifts-header-date">{{ headerDate }}</div>
    </template>
    <MbscDatepicker
      v-model="shiftDates"
      display="anchored"
      select="range"
      timeWheels="|h:mm A|"
      :controls="['time']"
      :minTime="minTime"
      :maxTime="maxTime"
      :showRangeLabels="false"
      :stepMinute="30"
      :startInput="startInput"
      :endInput="endInput"
      :touchUi="false"
    />
    <div class="mbsc-form-group">
      <MbscInput ref="startInput" label="Shift start" :dropdown="true" />
      <MbscInput ref="endInput" label="Shift end" :dropdown="true" />
    </div>
    <div class="mbsc-form-group">
      <MbscTextarea v-model="shiftNotes" label="Notes" />
    </div>
    <div v-if="isEdit" class="mbsc-button-group">
      <MbscButton
        className="mbsc-button-block"
        color="danger"
        variant="outline"
        @click="handleShiftDeleteClick"
      >
        Delete shift
      </MbscButton>
    </div>
  </MbscPopup>
  <MbscSnackbar
    message="Event deleted"
    :button="snackbarButton"
    :isOpen="isSnackbarOpen"
    @close="isSnackbarOpen = false"
  />
  <MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="isToastOpen = false" />
</template>

<style>
.mds-employee-shifts-header-primary {
  font-size: 16px;
  line-height: 20px;
}

.mds-employee-shifts-header-date {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  opacity: 0.6;
}

.mds-employee-shifts .mbsc-timeline-resource-col {
  width: 200px;
}

.mds-employee-shifts .mbsc-schedule-event-inner {
  text-align: center;
  height: 36px;
  line-height: 36px;
}

.mds-employee-shifts-cont {
  padding: 0 7px;
}

.mds-employee-shifts-name {
  font-size: 14px;
  line-height: 24px;
}

.mds-employee-shifts-title {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.mds-employee-shifts-avatar {
  width: 40px;
  height: 40px;
}
</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.