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 with Timeline — organize staff by role, track occupancy per shift, and toggle shifts on or off.

Code

View code on GitHub 
import {
  CalendarNav,
  CalendarNext,
  CalendarPrev,
  CalendarToday,
  Checkbox,
  Eventcalendar,
  formatDate,
  Select,
  setOptions ,
} from '@mobiscroll/react';
import { Fragment, useCallback, useMemo, useState } from 'react';

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-31T02:00',
    end: '2026-10-31T10:00',
    title: 'Derek',
    resource: 21,
    slot: 1,
  },
  {
    start: '2026-10-31T02:00',
    end: '2026-10-31T10:00',
    title: 'Florence',
    resource: 46,
    slot: 1,
  },
  {
    start: '2026-10-31T08:00',
    end: '2026-10-31T12:00',
    title: 'Willis',
    resource: 12,
    slot: 2,
  },
  {
    start: '2026-10-31T08:00',
    end: '2026-10-31T12:00',
    title: 'Jewell',
    resource: 32,
    slot: 2,
  },
  {
    start: '2026-10-31T08:00',
    end: '2026-10-31T12:00',
    title: 'Jenifer',
    resource: 42,
    slot: 2,
  },
  {
    start: '2026-10-31T08:00',
    end: '2026-10-31T12:00',
    title: 'Jon',
    resource: 52,
    slot: 2,
  },
  {
    start: '2026-10-31T08:00',
    end: '2026-10-31T12:00',
    title: 'Fred',
    resource: 71,
    slot: 2,
  },
  {
    start: '2026-10-31T08:00',
    end: '2026-10-31T12:00',
    title: 'Adrianna',
    resource: 82,
    slot: 2,
  },
  {
    start: '2026-10-31T08:00',
    end: '2026-10-31T12:00',
    title: 'Jude',
    resource: 11,
    slot: 3,
  },
  {
    start: '2026-10-31T11:00',
    end: '2026-10-31T15:00',
    title: 'Jewell',
    resource: 32,
    slot: 3,
  },
  {
    start: '2026-10-31T11:00',
    end: '2026-10-31T15:00',
    title: 'Gray',
    resource: 45,
    slot: 3,
  },
  {
    start: '2026-10-31T11:00',
    end: '2026-10-31T15:00',
    title: 'Isadora',
    resource: 54,
    slot: 3,
  },
  {
    start: '2026-10-31T11:00',
    end: '2026-10-31T15:00',
    title: 'Antonia',
    resource: 72,
    slot: 3,
  },
  {
    start: '2026-10-31T11:00',
    end: '2026-10-31T15:00',
    title: 'Adrianna',
    resource: 82,
    slot: 3,
  },
  {
    start: '2026-10-31T11:00',
    end: '2026-10-31T15:00',
    title: 'Leon',
    resource: 84,
    slot: 3,
  },
  {
    start: '2026-10-31T11:00',
    end: '2026-10-31T15:00',
    title: 'Yancy',
    resource: 91,
    slot: 3,
  },
  {
    start: '2026-10-31T16:00',
    end: '2026-10-31T23:00',
    title: 'Ryan',
    resource: 13,
    slot: 4,
  },
  {
    start: '2026-10-31T16:00',
    end: '2026-10-31T23:00',
    title: 'Merv',
    resource: 22,
    slot: 4,
  },
  {
    start: '2026-10-31T16:00',
    end: '2026-10-31T23:00',
    title: 'Ford',
    resource: 31,
    slot: 4,
  },
  {
    start: '2026-10-31T16:00',
    end: '2026-10-31T23:00',
    title: 'Dory',
    resource: 33,
    slot: 4,
  },
  {
    start: '2026-10-31T16:00',
    end: '2026-10-31T23:00',
    title: 'Breanne',
    resource: 41,
    slot: 4,
  },
  {
    start: '2026-10-31T16:00',
    end: '2026-10-31T23:00',
    title: 'Meredith',
    resource: 51,
    slot: 4,
  },
  {
    start: '2026-10-31T16:00',
    end: '2026-10-31T23:00',
    title: 'Carlyn',
    resource: 53,
    slot: 4,
  },
  {
    start: '2026-10-31T16:00',
    end: '2026-10-31T23:00',
    title: 'Layton',
    resource: 61,
    slot: 4,
  },
  {
    start: '2026-10-31T16:00',
    end: '2026-10-31T23:00',
    title: 'Gerry',
    resource: 73,
    slot: 4,
  },
  {
    start: '2026-10-31T16:00',
    end: '2026-10-31T23:00',
    title: 'Reg',
    resource: 81,
    slot: 4,
  },
  {
    start: '2026-10-31T16:00',
    end: '2026-10-31T23:00',
    title: 'Lou',
    resource: 83,
    slot: 4,
  },
  {
    start: '2026-10-31T16:00',
    end: '2026-10-31T23:00',
    title: 'Sierra',
    resource: 92,
    slot: 4,
  },
  {
    start: '2026-10-31T11:00',
    end: '2026-10-31T11:59',
    title: 'Derek',
    resource: 21,
    slot: 5,
  },
  {
    start: '2026-10-31T11:00',
    end: '2026-10-31T11:59',
    title: 'Natalie',
    resource: 43,
    slot: 5,
  },
  {
    start: '2026-10-31T11:00',
    end: '2026-10-31T11:59',
    title: 'Kaylin',
    resource: 44,
    slot: 5,
  },
  {
    start: '2026-10-31T11:00',
    end: '2026-10-31T11: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',
  },
];

function App() {
  const [shifts, setShifts] = useState(allShifts);
  const [mySlots, setMySlots] = useState(allSlots);
  const [shiftTimes, setShiftTimes] = useState([
    {
      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 [selectedView, setView] = useState('week');
  const myView = useMemo(
    () =>
      selectedView === 'day'
        ? {
            timeline: {
              type: 'day',
              eventDisplay: 'fill',
            },
          }
        : {
            timeline: {
              type: 'week',
              eventDisplay: 'fill',
              startDay: 1,
              endDay: 5,
            },
          },
    [selectedView],
  );

  const getEmployeeName = useCallback((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(' '));
        }
      }
    }
  }, []);

  const extendMyDefaultEvent = useCallback(
    (event) => ({
      title: getEmployeeName(event),
    }),
    [getEmployeeName],
  );

  const formatMyDate = useCallback((date) => formatDate('YYYY-MM-DD', new Date(date)), []);

  const getShiftsNrs = useCallback(
    (date, slotId) => {
      const shiftList = [];

      for (let i = 0; i < shifts.length; ++i) {
        const shift = shifts[i];
        // 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;
    },
    [shifts, formatMyDate],
  );

  const renderMyResource = useCallback((resource) => {
    const parent = resource.children;
    return (
      <div className={parent ? 'md-shift-resource' : ''} style={{ color: parent ? parent[0].color : '' }}>
        {parent && <span className="md-shift-resource-icon">{resource.icon}</span>}
        {resource.name}
      </div>
    );
  }, []);

  const renderMySlot = useCallback(
    (args) => {
      const slot = args.slot;
      const date = formatMyDate(args.date);
      const shiftList = getShiftsNrs(date, slot.id);
      let length = 0;

      return (
        <div className="md-shift-header">
          <div className="md-shift-name">
            {slot.name}
            <span className="md-shift-time">{slot.time}</span>
          </div>
          <div className={'md-shift-counts-' + date + '-' + slot.id}>
            {shiftList.length > 0 &&
              shiftList.map((shift, i) => {
                ++length;
                return (
                  <Fragment key={i}>
                    <div className="md-shift-count">
                      <span className="md-shift-icon">{myResources[i].icon}</span>
                      <span className={'md-shift-nr md-shift-nr-' + date + '-' + slot.id + '-' + (i + 1)}>{shift}</span>
                    </div>
                    {length === 4 && <br />}
                  </Fragment>
                );
              })}
            {shiftList.length === 0 && <div className="md-shift-count">{'\uD83D\uDE36'} empty...</div>}
          </div>
        </div>
      );
    },
    [formatMyDate, getShiftsNrs],
  );

  const checkboxChange = useCallback(
    (ev) => {
      const value = +ev.target.value;
      const checked = ev.target.checked;
      let filteredSlots = [];
      let updatedTimes = shiftTimes.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 }));
      }

      setMySlots(filteredSlots);
      setShiftTimes(updatedTimes);
    },
    [shiftTimes],
  );

  const viewChange = useCallback((event) => {
    setView(event.value);
  }, []);

  const renderMyHeader = () => (
    <Fragment>
      <CalendarNav />
      <div className="mbsc-flex mbsc-flex-1-0 mbsc-justify-content-end">
        {shiftTimes.map((cs) => (
          <Checkbox key={cs.id} value={cs.id} checked={cs.checked} disabled={cs.disabled} onChange={checkboxChange} theme="material">
            {cs.name}
          </Checkbox>
        ))}
      </div>
      <Select data={views} value={selectedView} onChange={viewChange} inputStyle="box" />
      <CalendarPrev />
      <CalendarToday />
      <CalendarNext />
    </Fragment>
  );

  const isDouble = useCallback((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;
  }, []);

  const handleCreateEvent = useCallback(
    (args, inst) => {
      if (isDouble(args.event, inst)) {
        return false;
      } else {
        setTimeout(() => {
          setShifts([...shifts, args.event]);
        });
      }
    },
    [shifts, isDouble],
  );

  const handleEventUpdate = useCallback(
    (args, inst) => {
      const event = args.event;

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

  const handleDeleteEvent = useCallback(
    (args) => {
      setShifts(shifts.filter((item) => item.id !== args.event.id));
    },
    [shifts],
  );

  return (
    <Eventcalendar
      view={myView}
      data={shifts}
      resources={myResources}
      slots={mySlots}
      clickToCreate={true}
      dragToMove={true}
      extendDefaultEvent={extendMyDefaultEvent}
      renderResource={renderMyResource}
      renderSlot={renderMySlot}
      renderHeader={renderMyHeader}
      onEventUpdate={handleEventUpdate}
      onEventCreate={handleCreateEvent}
      onEventDeleted={handleDeleteEvent}
      cssClass="md-shift-management-calendar"
    />
  );
}

export default App;

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.