What is a resource scheduler?

A resource scheduler answers one question: which resource does what, and when is it free? Resources are rows, time runs horizontally, and each piece of work is a bar placed on the row of the resource that does it. A hotel front desk sees rooms and stays, a workshop sees bays and repair jobs, a dispatcher sees technicians and visits.

This page explains how that layout differs from a calendar, when your product needs it, what SuperScheduler takes care of and what stays in your application, and the difference between the two editions. It ends with the vocabulary the rest of the documentation uses.

#How it differs from an appointment calendar

Both show events on a time axis, but they are built for different questions.

A calendar is organized around the person who reads it. A resource scheduler is organized around the things that have limited capacity. As soon as users need to compare many of them at once and move work from one to another, the calendar layout stops working: a week view of 80 rooms is 80 calendars.

#When you need one

You need a resource scheduler when several of these are true:

• Capacity is the problem. Rooms, beds, bays, crews, studios, machines, vehicles, berths or instruments can each do one thing at a time, or a limited number of things.
• Work moves between resources. A booking goes from Room 101 to Room 102, a repair moves to a bay with a lift, a visit is reassigned to another technician.
• Many resources are compared at once. Dozens to thousands of rows, often grouped by site, floor, team or type.
• Durations vary widely. Fifteen-minute slots and multi-week assignments live in the same data, so the view must go from minutes to months.
• Rules decide what may go where. A stay cannot move into the past, a job needs a certified technician, two surgeries cannot share a theatre.

A plain calendar is enough when one person manages one agenda, when the main need is invitations and recurring meetings, or when nobody compares resources. In that case a resource scheduler adds a dimension nobody uses.

Hotel room planningA shower leaks in Room 104. Rehouse the next guest, block the room for the plumber and find the nights that are already full. Physiotherapy clinic appointmentsA patient cannot make 10:00 AM. Find the next slot that respects breaks and room cleaning.

#What the library does and what your application does

SuperScheduler is a user interface component. It renders, measures and interacts; it does not own your data or your business.

#Lite and Pro

SuperScheduler comes in two editions with the same component name and the same date and data conventions.

• Lite is the public npm package super-scheduler-lite: a read-only daily timeline. See Quick start with Lite.
• Pro is the package super-scheduler, installed from a private, versioned tarball. See Install SuperScheduler Pro.

Neither edition imposes a limit on the number of resources or events. Lite throws when it receives an option it does not implement, so a Pro configuration never silently half-works on Lite. Pro keeps a small set of reserved APIs that are typed for compatibility but not implemented (for example inline text editing, interactive link creation and export to images or spreadsheets); they warn once in development, and the API reference marks them.

For commercial questions about Pro, see pricing.

#The data in one picture

Everything the scheduler draws comes from two arrays: resources and events. An event points to its resource by id.

import type { SuperScheduler } from 'super-scheduler'

// Rows: anything that can only do one thing at a time, or has a limited capacity.
export const resources: SuperScheduler.ResourceData[] = [
  { id: 'room-101', name: 'Room 101' },
  { id: 'room-102', name: 'Room 102' },
  { id: 'van-3', name: 'Van 3' },
]

// Bars: one interval on one row. `end` is exclusive, so the stay below ends at 11:00 on
// 5 October and a booking that starts at 11:00 that day does not overlap it.
export const events: SuperScheduler.EventData[] = [
  {
    id: 'booking-1042',
    resource: 'room-101',
    start: '2026-10-02T14:00:00',
    end: '2026-10-05T11:00:00',
    text: 'Booking 1042',
  },
  {
    id: 'route-7',
    resource: 'van-3',
    start: '2026-10-03T08:00:00',
    end: '2026-10-03T12:30:00',
    text: 'Delivery route 7',
  },
]

Rendered on a day axis, you would see three rows and two bars: one across 2 to 5 October on Room 101, and one on 3 October on Van 3. The data model guide covers ids, intervals and custom fields in detail.

#Glossary

These terms are used with the same meaning across the documentation and the API.

#Resource

A row of the scheduler: anything that can do work over time. In the API it is ResourceData, with an id and a name. In Pro, resources can have children (a tree), be frozen at the top or bottom, or be split into sub-rows. Some APIs say row: a row is the rendered resource.

#Event

A bar on a resource row: a booking, a shift, a job, a reservation. In the API it is EventData, with an id, text, start, end and the resource it belongs to. In callbacks you usually receive a wrapper (SuperScheduler.Event) whose data property is your object.

#Interval

The span of an event, from start to end. Intervals are half-open, [start, end): the start belongs to the event, the end does not. An event ending at 11:00 and another starting at 11:00 do not overlap.

#Cell

One step of the time grid on one row: a day, an hour or a 15-minute slot, depending on the scale. Cells are what you click to select time, what snapping aligns to, and what you can disable or decorate with onBeforeCellRender (Pro).

#Scale

The size of a cell: Day in Lite; in Pro also Hour, Minute, Week, Month, Year, or CellDuration with a custom number of minutes. The scale is independent of how headers are labeled. See Hours, minutes, days and zoom.

#Zoom level

A named set of time-axis options (scale, cell duration, cell width, headers) that Pro applies together. Gestures and control.zoom move between zoom levels, or zoom continuously between them.

#Control

The scheduler instance, SuperScheduler.Scheduler. The React component creates one when it mounts and disposes it when it unmounts. You call its methods to scroll, select, update or zoom; handlers receive it as args.control. See React integration.

#Next steps

• Try the read-only edition in a few minutes: Quick start with Lite.
• Install Pro and build an editable planning: Install SuperScheduler Pro.
• Learn the data model before connecting a backend: Resources, events and intervals.
• Browse working planning boards for twelve industries in the examples.