🔥
ExclusiveAn exclusive new experience — React Native support is on its way to Planby!
React Scheduler forShift Planning & Resource Booking
Planby is a high-performance React scheduler and timeline component with virtualization for large datasets (10k+ events). Timeline-first, drag & drop ready, and timezone aware.
npm install @nessprim/planbyTry Live DemoWhat is Planby?
Planby is a high-performance React scheduler and timeline component built around a resource timeline model: resources (employees, rooms, machines, TV channels, project teams) are displayed as horizontal rows, and events (shifts, bookings, tasks, broadcast programs, sessions) are time-ranged blocks on a shared horizontal axis. It uses bidirectional virtual rendering — windowing both the horizontal time axis and the vertical resource axis — to maintain constant 60fps scroll performance with datasets of 10,000 or more events.
Planby is available as @nessprim/planby on npm. It supports drag & drop event management, pixel-accurate time positioning, timezone-aware scheduling, and custom JSX event and row rendering. The same API runs on React Native (iOS and Android) via Expo modules.
Install: npm install @nessprim/planby — Free tier available. PRO is a one-time $400 per developer license.
Why Existing React Schedulers Fall Short
FullCalendar
jQuery-based. Heavy bundle. Timeline view is a paid add-on. Poor React integration. Struggles with 1000+ events.
React Big Calendar
No virtualization. No drag-resize out of box. Calendar-first, not timeline-first. Custom styling is painful.
DevExpress Scheduler
Expensive. Bloated API. Not optimized for large datasets. Overkill for most projects.
Building from Scratch
Timezone math is hell. Drag & drop edge cases. Virtualization complexity. 2-3 months of development.
React Scheduler Comparison
| Feature | Planby | FullCalendar | React Big Calendar | react-calendar-timeline | DevExpress |
|---|---|---|---|---|---|
| Virtualization | |||||
| Timeline-first | |||||
| Drag & Drop | Paid | Manual | |||
| React Native | |||||
| Actively Maintained | |||||
| Bundle Size | ~45KB | ~200KB | ~90KB | ~80KB | ~300KB+ |
| TypeScript | Partial | Partial | |||
| Price | Free + $400 | $0–$1000/yr | Free | Free | $799+/yr |
Performance & Scalability
10,000+ Events
Virtual scrolling renders only visible items. Smooth 60fps with thousands of events.
Real-time Updates
Optimized re-renders. Works with WebSocket streams. No jank when data changes.
Timezone Aware
Built-in timezone support. No external libs needed. Handles DST transitions correctly.
Why Timeline Architecture Scales:
- Virtualization works naturally with horizontal scrolling
- No complex month/week/day view switching
- Simpler collision detection for overlapping events
- Better for continuous time ranges (shifts, bookings)
Bidirectional Windowing Explained
Planby uses bidirectional virtual rendering — windowing both axes simultaneously. The horizontal axis windows the time range: only programs visible in the current scroll position are rendered to the DOM, so scrolling a week-long schedule with 10,000+ events costs no more than scrolling a 10-event schedule. The vertical axis windows the resource rows: only the channels currently in the viewport are mounted. A 500-employee shift schedule renders as cheaply as a 5-employee one. Libraries that only virtualize one axis (or neither) hit performance walls at 500–1,000 events. Planby does not.
Try the React Scheduler Live
Scheduler
Your scheduler with drag and drop, overlapping events, grid layout, and more.
Timezones
Drag and Drop
Resize elements
Overlap events
Grid layout / events
ℹ️ Note: Drag and drop “multi-rows” with “layer” overlap mode is still in test mode.
React Scheduler Use Cases
Employee Shift Planning
Manage team schedules, handle shift swaps, track time-off requests.
Resource Booking
Room reservations, equipment scheduling, studio bookings.
Project Timeline
Gantt-style project management with task dependencies.
Appointment Scheduler
Booking systems for services, consultations, meetings.
Conference Agenda
Multi-track events with session scheduling.
Production Planning
Manufacturing schedules, logistics, delivery planning.
Quick Start - 5 Minutes
import { useEpg, Epg, Layout } from '@nessprim/planby-pro';
const {
getEpgProps,
getLayoutProps,
onScrollToNow,
onScrollLeft,
onScrollRight,
} = useEpg({
epg,
channels,
startDate: '2026/02/02', // or 2026-02-02T00:00:00
});
return (
<div>
<div style={{ height: '600px', width: '1200px' }}>
<Epg {...getEpgProps()}>
<Layout
{...getLayoutProps()}
/>
</Epg>
</div>
</div>
);Why Choose Planby?
See how Planby stacks up against other solutions in the market
| Feature | Planby ⭐ Best | FullCalendar | Syncfusion | Custom |
|---|---|---|---|---|
| React-first | ||||
| Easy customization | ||||
| TypeScript support | ||||
| Virtualisation | ||||
| Performance optimized | ||||
| Drag & drop support | ||||
| Regular updates | ||||
| Mobile responsive | ||||
| Setup time | ~10 min | 12 days | 15 days | Months/Years |
⚡ Lightning fast
💰 Most affordable
🎨 Easy customization
Your Perfect Plan Awaits
Built for React and React Native teams. Start with what you need. Grow when you're ready.
Get exclusive access to Planby PRO features
Solo 🥳
$
19
/ month
- Ready-to-use code examples
- 1 developer license
- No team collaboration
- 🎁5 days free trial
- Commercial
PRO
🚀$
25
/ month
- Ready-to-use code examples
- Team access
- Portal Planby access
- PRO Documentation
- Updates included
- 🎁7 days free trial
- Commercial
- License key
Custom 👨💻
Enterprise
- Everything included in PRO
- Enterprise exclusive features
- One-on-one onboarding
- Expert Consultation
- Premium support
- Commercial
Perpetual licenses for your team or company.
Solo 🥳
$
400
- Ready-to-use code examples
- 1 developer license
- No team collaboration
- Commercial
PRO
🚀$
500
- Ready-to-use code examples
- Team access
- Portal Planby access
- PRO Documentation
- Commercial
- License key
- 1 year update license included
Custom 👨💻
Enterprise
- Everything included in PRO
- Enterprise exclusive features 🚀
- One-on-one onboarding
- Expert Consultation
- Premium support
- Commercial
React Scheduler FAQ
Common questions about building schedulers and timelines with Planby.
What's the fastest React scheduler component?
Planby is a high-performance React scheduler and timeline component optimized for speed and large datasets. It uses virtual view rendering (windowing) to keep only visible events in the DOM, delivering 60fps scroll performance with 10,000+ events. Unlike FullCalendar or React Big Calendar, Planby renders fewer than 50 DOM nodes regardless of dataset size — making it the fastest React scheduler component for resource-heavy timelines.
Does Planby handle large event datasets?
Yes — Planby uses custom virtual view rendering optimized for thousands of events. Both axes are virtualized simultaneously: horizontal (time) and vertical (resources/rows). Loading 10,000 events looks identical to loading 100 from the browser's perspective, because events outside the viewport are never mounted into the DOM. This makes Planby the right choice for production apps with real-time streams, dense shift schedules, or large resource timelines.
Is Planby only for EPG / TV guides?
No. Planby started as an EPG (Electronic Program Guide) library, but it is a general-purpose React timeline scheduler. The same component powers shift planning, resource booking, project timelines, Gantt charts, appointment systems, conference agendas, sports schedules, and more. In Planby, "channels" are your resources (employees, rooms, machines, teams) and "programs" are your events (shifts, bookings, tasks, appointments). EPG is one of many supported use cases.
How does Planby compare to FullCalendar?
Planby and FullCalendar solve different problems. FullCalendar is calendar-first — its resource timeline view requires a $1,099/year Premium license and has no built-in virtualization. Planby is timeline-first, built natively for React (hooks, TypeScript, JSX custom rendering), includes virtualization for 10k+ events at no extra cost, and has a one-time PRO license with no annual renewal. For resource timeline use cases, Planby significantly outperforms FullCalendar in performance, React integration, and total cost.
Does Planby support React Native?
Yes. Planby supports React Native for building timeline and scheduler interfaces on iOS and Android. The React Native version is currently in BETA with PRO features included for early adopters. It uses the same conceptual API as the web version (channels, programs, useEpg hook), making it straightforward for teams already using Planby on the web.
What React scheduler alternatives are there to FullCalendar?
The main React scheduler alternatives to FullCalendar are: Planby (timeline-first, virtualized, React Native support, one-time license), React Big Calendar (calendar-first, no virtualization, free), DevExtreme Scheduler (enterprise, expensive, complex API), and DHTMLX Scheduler (jQuery-based wrapper). Planby is the strongest alternative for resource timeline use cases — it is the only one with built-in virtual rendering and React Native support.
What use cases does Planby support?
Planby supports: employee shift scheduling, resource and room booking, project timelines and Gantt charts, appointment and booking systems, TV and radio EPG (Electronic Program Guide), conference and event agendas, sports and tournament planners, production and manufacturing schedules, and any other horizontal resource timeline interface. The core model is simple: rows (channels) and events (programs) on a time axis.
Does Planby support drag and drop?
Yes. Planby PRO includes drag and drop for moving events between resource rows and resizing events to change duration. Events can be dragged horizontally to change their time and vertically to reassign them to a different resource. The drag callbacks return the new position data so you can update your state or persist to an API.
How do I install and get started with Planby?
Install Planby with npm install @nessprim/planby or yarn add @nessprim/planby. The package includes TypeScript types. Import useEpg, Epg, and Layout from the package. Pass your channels array (resources/rows) and epg array (events) to useEpg along with a startDate. A basic working scheduler takes under 5 minutes to set up.
What is the difference between Planby free and PRO?
Planby free includes core timeline rendering, basic customization, and community support — suitable for open-source and personal projects. Planby PRO adds drag and drop event management, advanced timezone handling, PRO documentation and code examples, Planby Portal access, and priority support. PRO is a one-time purchase per developer seat with no annual renewal fees.
Ready to get started?
npm install @nessprim/planby