24-Hour Rotating Crew Shift Rota

The scheduler can be configured for industrial or service environments requiring 24/7 coverage, such as manufacturing lines or critical infrastructure maintenance. This setup uses three resources (Crew A, Crew B, Crew C) to demonstrate a cyclical, rotating roster, like the 3-Crew, 3-Shift Rota.

To visualize the continuous operation and manage shifts that span midnight, the scheduler view is configured with a custom, 24-hour cycle, starting at 06:00 and ending at 06:00 the following day. This is achieved using the custom day-offset feature added to the startTime (e.g., '20:00-1') and endTime (e.g., '08:00+1') properties under the view option, which initiates the view relative to the previous or next calendar day. Furthermore, to ensure compliance with 8-hour shift lengths and prevent invalid scheduling, the drag-and-drop functionality is constrained by setting the dragTimeStep to 8 hours, requiring all events to be moved only in 8-hour increments and anchoring the alignment with the dragTimeStepBase: 'viewStart' option. The drag-and-drop logic is implemented for automatic conflict resolution: when an event is dragged to a different time or resource column within the same day, it automatically updates and shifts any conflicting events (those sharing the same time slot or resource column) to maintain scheduling integrity and prevent overlaps.

Get started with this example

Demo

Loading the live demo

Preview in full screen

Build a 24-hour rotating crew rota with the Scheduler — three crews, three shifts, and automatic conflict resolution when shifts move.

Code

View code on GitHub 
<script setup>
import { MbscEventcalendar, MbscToast, setOptions  } from '@mobiscroll/vue'
import { ref } from 'vue'

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

const morningColor = '#4a8c4d'
const afternoonColor = '#f87c6b'
const nightColor = '#8567AD'

const shifts = {
  morning: { startHour: 6, endHour: 14, title: 'Morning Shift', color: morningColor },
  afternoon: { startHour: 14, endHour: 22, title: 'Afternoon Shift', color: afternoonColor },
  night: { startHour: 22, endHour: 6, nextDay: true, title: 'Night Shift', color: nightColor }
}

const getShiftByHour = (hour) => {
  if (hour >= 6 && hour < 14) {
    return shifts.morning
  }
  if (hour >= 14 && hour < 22) {
    return shifts.afternoon
  }
  if (hour >= 22 || hour < 6) {
    return shifts.night
  }
  return shifts.afternoon
}

const calculateStart = (start) => {
  const d = new Date(start)
  const originalHour = d.getHours()
  const shift = getShiftByHour(originalHour)
  d.setHours(shift.startHour, 0, 0, 0)
  if (shift.startHour === 22 && originalHour < 6) {
    d.setDate(d.getDate() - 1)
  }
  return d
}

const calculateEnd = (start) => {
  const d = new Date(start)
  const startHour = d.getHours()
  const shift = getShiftByHour(d.getHours())
  d.setHours(shift.endHour, 0, 0, 0)
  if (shift.nextDay && startHour === 22) {
    d.setDate(d.getDate() + 1)
  }
  return d
}

const getTitle = (startHours) => getShiftByHour(startHours).title

const getColor = (startHours) => getShiftByHour(startHours).color

const initialEvents = [
  {
    id: 1,
    resource: 'A',
    title: 'Morning Shift',
    start: '2026-10-23T06:00',
    end: '2026-10-23T14:00',
    color: morningColor
  },
  {
    id: 2,
    resource: 'B',
    title: 'Afternoon Shift',
    start: '2026-10-23T14:00',
    end: '2026-10-23T22:00',
    color: afternoonColor
  },
  {
    id: 3,
    resource: 'C',
    title: 'Night Shift',
    start: '2026-10-23T22:00',
    end: '2026-10-24T06:00',
    color: nightColor
  },
  {
    id: 4,
    resource: 'A',
    title: 'Morning Shift',
    start: '2026-10-24T06:00',
    end: '2026-10-24T14:00',
    color: morningColor
  },
  {
    id: 5,
    resource: 'B',
    title: 'Afternoon Shift',
    start: '2026-10-24T14:00',
    end: '2026-10-24T22:00',
    color: afternoonColor
  },
  {
    id: 6,
    resource: 'C',
    title: 'Night Shift',
    start: '2026-10-24T22:00',
    end: '2026-10-25T06:00',
    color: nightColor
  },
  // Showing partial data. Download full source.
]

const resources = [
  { id: 'A', name: 'Crew A' },
  { id: 'B', name: 'Crew B' },
  { id: 'C', name: 'Crew C' }
]

const view = {
  scheduler: {
    type: 'week',
    allDay: false,
    startTime: '06:00',
    endTime: '06:00+1',
    timeCellStep: 120,
    timeLabelStep: 120
  }
}

const colors = ref([])
const redResources = ref({})
const draggedEventStart = ref(null)
const draggedEventEnd = ref(null)
const draggedEventResource = ref(null)
const availableSlotOnHover = ref(null)
const isToastOpen = ref(false)
const toastMessage = ref('')
const myEvents = ref(initialEvents)

const getAvailableSlots = (resourceId, dayStart) => {
  const dayEnd = new Date(dayStart)
  dayEnd.setDate(dayEnd.getDate() + 1)
  dayEnd.setHours(6, 0, 0, 0)
  const dayEvents = myEvents.value.filter((e) => {
    const eStart = new Date(e.start)
    return eStart >= dayStart && eStart < dayEnd
  })
  const slots = { morning: true, afternoon: true, night: true }
  dayEvents.forEach((e) => {
    if (e.resource === resourceId) {
      slots.morning = slots.afternoon = slots.night = false
    } else {
      const startHour = new Date(e.start).getHours()
      if (startHour === 6) {
        slots.morning = false
      } else if (startHour === 14) {
        slots.afternoon = false
      } else if (startHour === 22) {
        slots.night = false
      }
    }
  })
  return slots
}

const clearColorsForResource = (currentColors, resourceId, date) => {
  const base = new Date(date)
  base.setHours(0, 0, 0, 0)
  const baseTime = +base
  return currentColors.filter((c) => {
    if (c.resource === resourceId) {
      const cDate = new Date(c.start)
      cDate.setHours(0, 0, 0, 0)
      if (+cDate === baseTime) {
        const hour = new Date(c.start).getHours()
        if (hour === 6 || hour === 14 || hour === 22) {
          return false
        }
      }
    }
    return true
  })
}

const handleCellHoverIn = (args) => {
  const hoveredDate = new Date(args.date)
  const shift = getShiftByHour(hoveredDate.getHours())
  if (!shift) return

  const dayStart = new Date(args.date)
  dayStart.setHours(6, 0, 0, 0)
  const availableSlots = getAvailableSlots(args.resource.id, dayStart)
  const slotKey = Object.keys(availableSlots).find(
    (key) => availableSlots[key] && shifts[key].startHour === shift.startHour
  )
  if (slotKey) {
    const startTime = new Date(dayStart)
    startTime.setHours(shifts[slotKey].startHour, 0, 0, 0)
    const endTime = new Date(+startTime + 8 * 60 * 60 * 1000 - 1)
    const slot = {
      background: '#c1ffe180',
      cssClass: 'available-slot mbsc-font-icon mbsc-icon-plus',
      start: +startTime + 1,
      end: endTime,
      resource: args.resource.id
    }
    availableSlotOnHover.value = slot
    colors.value = [...colors.value, slot]
  }
}

const handleCellHoverOut = () => {
  if (availableSlotOnHover.value) {
    colors.value = colors.value.filter((c) => c !== availableSlotOnHover.value)
    availableSlotOnHover.value = null
  }
}

const handleEventCreate = (args) => {
  const event = { ...args.event, id: Date.now() }
  const dayStart = new Date(event.start)
  dayStart.setHours(6, 0, 0, 0)
  const dayEnd = new Date(dayStart)
  dayEnd.setDate(dayEnd.getDate() + 1)
  dayEnd.setHours(6, 0, 0, 0)
  const dayEvents = myEvents.value.filter((e) => {
    const eStart = new Date(e.start)
    return eStart >= dayStart && eStart < dayEnd
  })
  const conflict = dayEvents.find(
    (ev) => ev.resource === event.resource || +new Date(ev.start) === +new Date(event.start)
  )
  if (conflict) {
    toastMessage.value = 'Already assigned'
    isToastOpen.value = true
    return false
  }
  colors.value = clearColorsForResource(colors.value, event.resource, event.start)
  const day = new Date(event.start)
  day.setHours(0, 0, 0, 0)
  redResources.value = { ...redResources.value, [event.resource + day.toISOString()]: false }
  availableSlotOnHover.value = null
  myEvents.value = [...myEvents.value, event]
}

const handleEventClick = () => {
  toastMessage.value = 'Already assigned'
  isToastOpen.value = true
}

const handleEventDelete = (args) => {
  myEvents.value = myEvents.value.filter((e) => e.id !== args.event.id)
  const colorStart = new Date(args.event.start)
  colorStart.setHours(6, 0, 0, 0)
  const colorEnd = new Date(args.event.start)
  colorEnd.setDate(colorEnd.getDate() + 1)
  colorEnd.setHours(6, 0, 0, 0)
  colors.value = [
    ...colors.value,
    { start: colorStart, end: colorEnd, background: '#ffdbd280', resource: args.event.resource }
  ]
  const resource = args.event.resource
  const day = new Date(args.event.start)
  day.setHours(0, 0, 0, 0)
  redResources.value = { ...redResources.value, [resource + day.toISOString()]: true }
  toastMessage.value = args.event.title + ' deleted'
  isToastOpen.value = true
}

const handleEventDragStart = (args) => {
  draggedEventStart.value = args.event.start
  draggedEventEnd.value = args.event.end
  draggedEventResource.value = args.event.resource
}

const handleEventUpdateFailed = () => {
  toastMessage.value = 'Already assigned'
  isToastOpen.value = true
}

const handleEventUpdate = (args) => {
  const event = args.event
  const dayStart = new Date(event.start)
  dayStart.setHours(6, 0, 0, 0)
  const dragStartDay = new Date(draggedEventStart.value)
  dragStartDay.setHours(6, 0, 0, 0)
  if (+dayStart !== +dragStartDay) {
    return false
  }

  const dayEnd = new Date(dayStart)
  dayEnd.setDate(dayEnd.getDate() + 1)
  dayEnd.setHours(6, 0, 0, 0)
  const dayEvents = myEvents.value.filter((e) => {
    const eStart = new Date(e.start)
    return eStart >= dayStart && eStart < dayEnd
  })
  const conflicts = dayEvents.filter(
    (ev) =>
      ev.id !== event.id &&
      (ev.resource === event.resource || +new Date(ev.start) === +new Date(event.start))
  )
  const evStart = new Date(event.start)
  event.title = getTitle(evStart.getHours())
  event.color = getColor(evStart.getHours())

  if (conflicts.length) {
    let shouldReturn = false
    conflicts.forEach((sh, i) => {
      if (sh.resource === event.resource) {
        if (+event.start === +new Date(sh.start)) {
          shouldReturn = true
        }
        sh.resource = draggedEventResource.value
        conflicts[i] = sh
      } else {
        sh.start = draggedEventStart.value
        sh.end = draggedEventEnd.value
        const start = new Date(draggedEventStart.value)
        sh.title = getTitle(start.getHours())
        sh.color = getColor(start.getHours())
        conflicts[i] = sh
      }
    })
    if (shouldReturn) {
      return false
    }
    myEvents.value = myEvents.value.map((e) => {
      const updated = [...conflicts, event].find((u) => u.id === e.id)
      return updated || e
    })
  } else {
    if (dayEvents.some((ev) => ev.id === event.id)) {
      myEvents.value = myEvents.value.map((e) => (e.id === event.id ? event : e))
    }
  }

  colors.value = clearColorsForResource(colors.value, event.resource, event.start)
  const day = new Date(event.start)
  day.setHours(0, 0, 0, 0)
  redResources.value = { ...redResources.value, [event.resource + day.toISOString()]: false }
  if (!conflicts.length && event.resource !== draggedEventResource.value) {
    const colorEnd = new Date(dayStart)
    colorEnd.setDate(colorEnd.getDate() + 1)
    colorEnd.setHours(6, 0, 0, 0)
    colors.value = [
      ...colors.value,
      { start: dayStart, resource: args.oldEvent.resource, background: '#ffdbd280', end: colorEnd }
    ]
    redResources.value = {
      ...redResources.value,
      [args.oldEvent.resource + day.toISOString()]: true
    }
  }
  draggedEventStart.value = null
  draggedEventEnd.value = null
  draggedEventResource.value = null
}

const extendDefaultEvent = (args) => {
  const start = new Date(args.start)
  const newStart = calculateStart(start)
  const newEnd = calculateEnd(start)
  const title = getTitle(newStart.getHours())
  const color = getColor(newStart.getHours())
  return {
    title: title,
    start: newStart,
    end: newEnd,
    color: color
  }
}

const handleToastClose = () => {
  isToastOpen.value = false
}
</script>

<template>
  <div>
    <MbscEventcalendar
      cssClass="mds-24-hour-manufacturing-calendar"
      :data="myEvents"
      :colors="colors"
      :dragToMove="true"
      :dragToCreate="false"
      :clickToCreate="'single'"
      :dragToResize="false"
      :dragTimeStep="480"
      :dragTimeStepBase="'viewStart'"
      :eventDelete="true"
      :eventOverlap="false"
      :extendDefaultEvent="extendDefaultEvent"
      @cellHoverIn="handleCellHoverIn"
      @cellHoverOut="handleCellHoverOut"
      @eventCreate="handleEventCreate"
      @eventClick="handleEventClick"
      @eventDelete="handleEventDelete"
      @eventDragStart="handleEventDragStart"
      @eventUpdateFailed="handleEventUpdateFailed"
      @eventUpdate="handleEventUpdate"
      :groupBy="'date'"
      :resources="resources"
      :view="view"
    >
      <template #resource="resource, day">
        <div
          :style="
            redResources[resource.id + day.toISOString()]
              ? { color: '#a65037', background: '#ffdbd280', margin: '-0.5em', padding: '0.5em' }
              : {}
          "
        >
          {{ resource.name }}
        </div>
      </template>
    </MbscEventcalendar>
    <MbscToast :isOpen="isToastOpen" :message="toastMessage" @close="handleToastClose" />
  </div>
</template>

<style>
.mds-24-hour-manufacturing-calendar .mbsc-schedule-events {
  left: 0;
  right: 0;
}

.mds-24-hour-manufacturing-calendar .mbsc-schedule-time-wrapper {
  height: 2.5em;
}

.mds-24-hour-manufacturing-calendar .mbsc-schedule-item {
  height: 2.5em;
}

.mds-24-hour-manufacturing-calendar .mbsc-schedule-color.available-slot {
  z-index: auto;
}

.mds-24-hour-manufacturing-calendar .mbsc-schedule-color.available-slot .mbsc-schedule-color-text {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #33333380, #00000080);
  box-sizing: border-box;
}

.mds-24-hour-manufacturing-calendar .mbsc-schedule-color.available-slot.mbsc-font-icon:before {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  top: 50%;
  left: 50%;
  color: #e0fff0;
  font-size: 12px;
  opacity: 0.8;
  transform: translate(-50%, -50%);
}
</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.