Skip to content
Resource Scheduler

Introduction

Resource Scheduler is a React component that puts resources on rows and time on columns: people, rooms, machines, vehicles. Think booking boards, shift rosters, field-service dispatch and project allocation.

It is MIT licensed, and everything in these docs is in the free package. There is no paid tier to upgrade to.

What it does

Section titled “What it does”
  • Day, week, month, quarter and year views, with day-view slots of any length and configurable visible hours.
  • Create, move and resize events with the mouse, a pen, a finger or the keyboard.
  • Conflict rules: forbid overlaps or write your own check. Rejected places show in red before you drop.
  • onSlotSelect, so you open your own create dialog instead of getting a hard-coded one.
  • An ARIA grid, named cells and live announcements for screen readers.
  • Design tokens as CSS variables, and styles scoped so they never restyle your app.

What it does not do (yet)

Section titled “What it does not do (yet)”

Be honest with yourself before you pick it:

  • Recurring rules are not the whole of iCalendar. Hourly to yearly repeats (the last Friday, the first and last day of the month) with exceptions are built in, and RRULE strings can be read and written; BYMONTH lists, week numbers and per-series time zones are not.
  • Several thousand resources is the ceiling. Rows and columns are virtualized: 2,500 resources with 50,000 events and a year view across many resources are fine (benchmark), but the first render still does work for every resource, so beyond that load a window of resources from your server.
  • Groups are collapsible headers only: they nest and show a utilization total, but there is no drag to reorder and no lazy loading of a branch. No two-way calendar sync (.ics import and export, and CSV export, are built), no Gantt dependencies.
  • Not yet tried with a real screen reader (it passes axe and keyboard tests). See Keyboard and accessibility.

The roadmap lists what is planned. If you need Gantt dependencies or tens of thousands of events today, look at the alternatives.

How it works

Section titled “How it works”

You give it resources, each with its events. It never keeps its own copy: when the user creates, moves or resizes something it calls your handler, and you update your state. That makes it easy to put in front of any data source. See the data model.