Every scheduler on this site is live
A React library for interactive resource planning: a timeline your users drag, resize, zoom and undo, ruled by your business logic. This is not a screenshot — it is SuperScheduler Pro running in your browser.
Pick a business. The same scheduler takes its resources, its time scale, its words and its rules, reconfigured in place and never remounted.
The job
Specialists across overlapping campaigns, planned in days and weeks, where one late task moves the next.
Try it. Drag Launch film to start before Launch layouts ends.
The library gives
Your app decides
One timeline at every scale. Pinch, or scroll with Ctrl or ⌘ held: the zoom stays under your pointer, headers and detail adapt as you go, and React does not render once.
44px
Fictional congress centre, synthetic data1,966 bookings in 2027
Pick a dataset and your browser generates it right here, up to 200,000 bookings on 5,000 rows. Then scroll, zoom or let the test drive. The page keeps only what is on screen in the DOM.
In the lab120 rows · 6,000 bookings
Drag a session and your rules answer while it is still in the air: where it would land, for how long and, when the answer is no, why. Every callback your app receives shows up beside the board, with the line of code that decided.
Try this0/6
The same twelve people as a tree by team, by skill or a flat list, with columns your application computes. Search them, read anyone at a glance, and drag work from the unassigned tray onto a person: two panes, one timeline.
TreestreeEnabled
Groups fold and unfold; regrouping keeps every person’s work attached.
ColumnsrowHeaderColumns
Row header columns hold your own figures, like the load your app computes.
FiltersonRowFilter
Rows filter through a callback you write: by name, skill or anything else.
PanesSchedulerPanes
Stacked schedulers share date, zoom and column widths; work moves between them.
Start from a theme, then make it yours: accent, surfaces, radius, event style, density and dark mode. Every change writes the scheduler’s own tokens while it runs, checks the contrast and hands you the CSS.
.planning {
--super-scheduler-accent-rgb: 25 97 68;
--super-scheduler-surface: #fcfaf6;
--super-scheduler-surface-raised: #f6f3ee;
--super-scheduler-text: #161b22;
--super-scheduler-text-muted: #4a5058;
--super-scheduler-border: #ddd8d2;
--super-scheduler-row-line: #ddd8d2;
--super-scheduler-grid-line: #e9e6e0;
--super-scheduler-selection: rgb(25 97 68 / 0.12);
--super-scheduler-selection-border: rgb(25 97 68 / 0.75);
--super-scheduler-focus-ring: rgb(25 97 68 / 0.5);
--super-scheduler-today-bg: rgb(25 97 68 / 0.06);
--super-scheduler-weekend-bg: rgb(0 0 0 / 0.025);
--super-scheduler-hover-cell: rgb(25 97 68 / 0.06);
--super-scheduler-hover-row: rgb(25 97 68 / 0.03);
--super-scheduler-event-radius: 7px;
--super-scheduler-event-bg: #dee6df;
--super-scheduler-event-border: #b3c9bd;
--super-scheduler-event-text: #124631;
--super-scheduler-event-bar: #196144;
}
import { SuperSchedulerComponent } from 'super-scheduler'
import type { SchedulerProps } from 'super-scheduler'
import 'super-scheduler/styles.css'
import './planning-theme.css'
export function Planning(props: SchedulerProps) {
return (
<div className="planning">
<SuperSchedulerComponent
{...props}
density="comfortable"
colorScheme="light"
durationBarVisible={true}
/>
</div>
)
}
Paste the CSS, put the class on the element around the scheduler and pass the density.
Fictional bookings. The tokens are the real --super-scheduler-* custom properties: the scheduler reads them live, nothing reloads.
One React component, typed props and callbacks. Read the code the way you will write it: each note lights up the lines it explains.
import { SuperSchedulerComponent } from 'super-scheduler-lite'import type { SuperScheduler } from 'super-scheduler-lite'import 'super-scheduler-lite/styles.css'const rooms: SuperScheduler.ResourceData[] = [ { id: 'studio-a', name: 'Studio A' }, { id: 'studio-b', name: 'Studio B' },]const bookings: SuperScheduler.EventData[] = [ { id: 1, resource: 'studio-a', text: 'Night Ferry', start: '2026-10-02', end: '2026-10-05' }, { id: 2, resource: 'studio-b', text: 'Lumen Choir', start: '2026-10-04', end: '2026-10-06' },]export function Planning() { return ( <SuperSchedulerComponent startDate="2026-10-01" days={31} height={420} resources={rooms} events={bookings} onEventClick={(args) => console.info(args.e.data.text)} /> )}SuperScheduler does
Your app decides
import { useMemo, useState } from 'react'import { SuperSchedulerComponent } from 'super-scheduler'import type { SuperScheduler } from 'super-scheduler'type Booking = SuperScheduler.EventData<{ locked?: boolean }>export function BookingBoard(props: { rooms: SuperScheduler.ResourceData[]; initial: Booking[] }) { const [bookings, setBookings] = useState(props.initial) const events = useMemo(() => bookings.slice(), [bookings]) return ( <SuperSchedulerComponent startDate="2026-10-01" days={31} resources={props.rooms} events={events} onEventMoving={(args) => { if ('locked' in args.e.data && args.e.data.locked === true) { args.allowed = false args.message = 'This booking is confirmed and locked.' } }} onEventMove={(args) => { args.async = true const change = { id: String(args.e.id()), resource: String(args.newResource) } saveBooking({ ...change, start: args.newStart.value, end: args.newEnd.value }).then( () => args.loaded(), () => { args.preventDefault() args.loaded() }, ) }} onEventsChange={({ events: next }) => setBookings([...next])} /> )}SuperScheduler does
Your app decides
import { SuperSchedulerComponent } from 'super-scheduler/react-render'import type { SuperScheduler } from 'super-scheduler'type Stay = { guest: string; nights: number; paid: boolean }type Props = { rooms: SuperScheduler.ResourceData[]; stays: SuperScheduler.EventData[] }function readStay(data: object): Stay | null { if (!('guest' in data) || !('nights' in data) || !('paid' in data)) return null const { guest, nights, paid } = data return typeof guest === 'string' && typeof nights === 'number' && typeof paid === 'boolean' ? { guest, nights, paid } : null}export function RichPlanning({ rooms, stays }: Props) { return ( <SuperSchedulerComponent startDate="2026-10-01" days={30} resources={rooms} events={stays} renderEvent={({ e, width }) => { const stay = readStay(e.data) if (stay === null) return e.text() return ( <span className="stay"> <strong>{stay.guest}</strong> {width >= 120 ? <small>{stay.nights} nights</small> : null} {stay.paid ? null : <span className="stay__due">Due</span>} </span> ) }} eventHover={{ pin: 'click', render: ({ e, close }) => ( <button type="button" className="stay-card" onClick={close}> {readStay(e.data)?.guest ?? e.text()} </button> ), }} /> )}SuperScheduler does
Your app decides
/* planning.css: the scheduler follows your tokens and your dark mode. */.planning { --super-scheduler-accent-rgb: 25 97 68; --super-scheduler-surface: #fcfaf6; --super-scheduler-surface-raised: #f6f3ee; --super-scheduler-border: #ddd8d2; --super-scheduler-event-radius: 7px; font-family: 'Geist', system-ui, sans-serif;}[data-theme='dark'] .planning { --super-scheduler-accent-rgb: 110 214 166; --super-scheduler-surface: #16181c; --super-scheduler-surface-raised: #1d2025; --super-scheduler-border: #2e3134;}.planning .super-scheduler__event[data-selected='true'] { outline: 2px solid rgb(var(--super-scheduler-accent-rgb));}SuperScheduler does
Your app decides
Every example has its own data model, rules, mission and source code. Six to start with.
Both editions share the data model, civil dates, virtualization and keyboard support. Pro adds everything that changes the plan.
Free
Read-only daily timelines for the boards and screens that show the plan.
What you build with it
How you install it
npm install super-scheduler-litePublic npm package · Package license: ISC
Quick start€499 per year
The full planning surface: people drag, resize, zoom, link and undo on the timeline itself.
What you build with it
How you install it
package.json"super-scheduler": "https://npm.superscheduler.org/pro/YOUR_DOWNLOAD_KEY/1.0.0.tgz"Private, versioned tarball over HTTPS with a download key
Install guideLicense terms not published yet. Nothing is sold on this site.
Short answers, each with the guide that goes deeper.
Browse the documentationBoth. SuperSchedulerComponent is the React wrapper for React 18 and 19; underneath, a DOM engine handles scrolling, zoom and gestures without React renders. You can also mount it imperatively with new SuperScheduler.Scheduler(element, options).
React integrationDeclarations ship with the package. Options, callbacks and control methods are typed, and event data is generic: EventData<YourFields> keeps your own fields typed in handlers and render hooks.
Resources, events and intervalsYes. Colors, radius, density and dark mode come from documented CSS custom properties; classNames and styles reach individual parts; React render slots replace the content of events, rows and headers.
Theming guideYour application. The scheduler shows and edits what you give it and reports every change through callbacks. Persistence, permissions and the final word on conflicts belong to your backend; the library helps with overlap prevention, blocked cells and refusals with a reason.
Controlled events and callbacksAs a private, versioned .tgz over HTTPS that npm installs like any URL dependency. The download key appears in your manifest and lockfile, so treat it as a secret. Lite is a regular public npm package.
Install ProPro has a full keyboard mode: arrows move focus, Enter activates, Alt+arrows move events, and changes are announced to assistive technology in English, Spanish, French, German and five more languages. Lite supports keyboard navigation too.
Keyboard and accessibilityPro covers months down to 5-minute cells, hides nights or weekends when you ask it to, and switches scale continuously. Lite is a daily timeline.
Hours, minutes, days and zoomDates are civil wall-clock values, deliberately free of time zones. Convert zoned instants and expand recurrences in your application before handing events to the scheduler.
Languages, dates and time zonesNo sign-up. Nothing to configure before you see it working.