Documentation
Everything you need to put a resource timeline into a React product: from the first render to production concerns. Each guide answers its question first, then shows code that compiles against the current release.
Press / anywhere to search the guides, examples and use cases.
Start here
- 01What is a resource scheduler?How a resource scheduler differs from an appointment calendar, when your product needs one, and which capabilities SuperScheduler Lite and Pro provide.
- 02Quick start with LiteInstall super-scheduler-lite from npm and render a read-only daily resource timeline in React: options and defaults, click callbacks, imperative control and limits.
- 03Install SuperScheduler ProInstall Pro from its private, versioned HTTPS tarball with npm, keep lockfile integrity, upgrade deliberately, run it in CI and treat the download key as a secret.
Core concepts
- Resources, events and intervalsThe data model: resource and event ids, half-open intervals, ISO date-times with seconds, civil times without time zones, and typed custom fields with EventData<T>.
- React integration, refs and lifecycleMount SuperSchedulerComponent, reach the control through refs or useSchedulerControl, size it, memoize props by identity and dispose correctly under Strict Mode.
- Controlled events and callbacksproKeep events in React state with onEventsChange, give the control its own copy, learn the callback order of a drop, and save changes optimistically or after confirmation.
Interaction
- Drag, resize and business rulesproValidate moves while the user drags, prevent overlaps, block closed time, lock events, confirm changes asynchronously and explain every refusal with the drag card.
- Hours, minutes, days and zoomproConfigure scales, cell durations and time headers, show hours or 15-minute cells, hide non-business time, and zoom from months to minutes with gestures, code and widgets.
- Resource trees, columns and selectionproGroup resources in a tree, add sortable, resizable and reorderable row header columns, filter rows and events, and select events, rows or time ranges in Pro.
- Keyboard, accessibility and touchEnable full keyboard navigation, understand the focus model and announcements, offer alternatives to dragging, and adapt the timeline to touch and assistive tech.
Customization
- React render slots and hover cardsproRender events, rows, headers, cells and areas as React components with super-scheduler/react-render, add hover cards, and keep large boards fast while scrolling.
- Themes, tokens, Tailwind and dark modeStyle the scheduler with --super-scheduler-* tokens, re-skin the accent so every tint follows, match your dark mode, and set up Tailwind v3 or v4 with the right layers.
Pro modules
- Minimap and derived metricsproAdd a timeline overview with super-scheduler/minimap, feed it utilization or any metric your application computes, and style, label and dispose of it correctly.
- Undo, redo and historyproRecord moves and resizes with super-scheduler/history, apply undo to controlled state, group bulk changes, add your own commands and roll back what the server refuses.
- Dependencies and links between eventsproDraw finish-to-start and other links between events from your data, style them, react to clicks, and enforce dependency rules in your application's own code.
- Coordinated panes and saved viewsproSplit one timeline into synchronized panes with super-scheduler/panes, move events between them, and save and restore zoom, scroll and rows with super-scheduler/views.
- Loading data by date rangeproLoad events as visitors scroll with super-scheduler/ranges: chunked and cancellable requests, a chunk cache, loading skeletons, retries and the server contract.
Production
- Virtualization and performanceHow SuperScheduler virtualizes rows, cells and events without React renders, what costs time in your integration, a checklist for large plans and how to measure.
- Languages, civil dates and time zonesLocalize headers and labels with any Intl locale, format SuperScheduler.Date values, and keep time-zone conversion and recurrence where they belong: in your app.
- Server rendering and prerendered pagesUse SuperScheduler in SSR or statically prerendered apps: ship a meaningful shell, reserve the space, mount the DOM engine on the client and keep CSP strict.
- Migrating from Lite to ProMove an integration from super-scheduler-lite to super-scheduler: what stays the same, which defaults and callbacks change, and how to adopt Pro features step by step.
- TroubleshootingFix the common integration problems: missing styles, zero-height hosts, null refs, empty views, wrong imports, duplicate React, Content Security Policy and Tailwind.