Exclusive

An exclusive new experience — React Native support is on its way to Planby!

LogoCreated with Sketch.planby
Description
How it works
Testimonials
Articles
Features
Affiliates
Pricing🔥
Jobs
Contact
React Timeline SchedulerNot Just EPG

One Timeline Component.Any Use Case.

Planby started as an EPG library — but it's a full React timeline scheduler engine. Shift planning, resource booking, project timelines, appointment systems, Gantt charts — all powered by the same component.

High-performance virtualization for 10k+ events. Drag & drop. Custom rendering. React Native. One API.

npm install @nessprim/planbySee All Use Cases
Clearing the record

“Isn't Planby just for TV guides?”

No. The EPG (Electronic Program Guide) use case put Planby on the map because TV guide interfaces are notoriously hard to build in React. But the underlying component is a general-purpose resource timeline scheduler.

The model is simple: channels (your rows — could be employees, rooms, machines, projects) and programs (your events — could be shifts, bookings, tasks, appointments). That's it. The rest is your custom JSX.

The Mental Model

PLANBY CONCEPT

channels

— rows — the vertical axis

e.g. employees, rooms, machines, teams, TV channels

programs

— events — the blocks on the timeline

e.g. shifts, bookings, tasks, appointments, shows

startDate / endDate

— the visible time window

e.g. today, this week, this month

renderProgram

— your custom event component

e.g. any JSX — cards, badges, tooltips

renderChannel

— your custom row label

e.g. avatars, icons, names, metadata

What you get out of the box

  • Horizontal scroll across any time range
  • Vertical scroll across any number of rows
  • Virtualization — only visible items rendered
  • Drag & drop to move events between rows and times
  • Resize events to change duration
  • Custom event and row label rendering (JSX)
  • Timezone support
  • Side panel for row labels
  • Time ruler with custom intervals
  • Live mode — auto-scroll to current time

Quick start

import { useEpg, Epg, Layout } from '@nessprim/planby-pro'; const { getEpgProps, getLayoutProps } = useEpg({ epg, // your events/shifts/bookings channels, // your resources/rooms/employees startDate: '2026/02/02', }); return ( <Epg {...getEpgProps()}> <Layout {...getLayoutProps()} /> </Epg> );

8 Use Cases — One Component

Every use case below uses the same Planby API. Only the data shape and custom rendering differ.

Employee Shift Scheduling

HR / Workforce

Plan weekly shifts across multiple departments. Each channel is an employee, each event is a shift block. Drag to reassign, resize to change duration.

#shift planner

#workforce scheduler

#staff rota

Resource & Room Booking

Hospitality / Office

Conference rooms, hotel rooms, studio spaces. Each channel is a resource. Events are reservations. Real-time availability at a glance.

#room booking

#resource scheduler

#reservation system

Project & Task Timeline

Project Management

Gantt-style project planning with tasks, milestones, and dependencies. Each channel is a team or person. Events are work packages with deadlines.

#gantt chart

#project timeline

#task scheduler

Appointment & Booking System

Healthcare / Services

Patient appointments, service bookings, consultation slots. Each channel is a practitioner or service. Events are booked time slots.

#appointment scheduler

#booking calendar

#service scheduler

TV & Radio EPG

Media / Broadcast

Electronic Program Guide — the original use case. Each channel is a TV/radio channel. Events are programs with metadata, thumbnails, and live indicators.

#epg

#program guide

#broadcast scheduler

Production & Manufacturing

Industry / Logistics

Factory floor scheduling, machine allocation, logistics planning. Each channel is a machine or team. Events are production runs with setup time.

#production planner

#manufacturing scheduler

#machine scheduler

Conference & Event Agenda

Events

Multi-track conference schedules, festival lineups, workshop agendas. Each channel is a stage or room. Events are sessions attendees can browse.

#event agenda

#conference scheduler

#session planner

Sports & Tournament Planner

Sports

Match schedules, league fixtures, court/field allocation. Each channel is a venue or team. Events are matches with live score updates.

#sports scheduler

#tournament planner

#fixture list

Why Timeline-First Architecture Wins

Most schedulers are calendar-first — they display month/week/day grids and bolt on a timeline as an afterthought. Planby is built the other way around.

Bidirectional Windowing

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. This is why Planby maintains constant 60fps performance regardless of total dataset size — and why calendar-first libraries that render everything upfront hit performance walls at 500–1,000 events.

Continuous time, not slots

Events can start at any second — not just the top of the hour. Shift at 06:45? Appointment at 14:30:00? No problem. The timeline renders pixel-accurate positions.

Horizontal scroll is natural

A week of shifts doesn't fit in a viewport. Horizontal scrolling across time is the expected UX — and it's where virtualization pays off most.

Many rows, dense data

Calendars break at 50 resources. Planby renders 500+ rows and 10,000+ events because rows and events outside the viewport simply don't exist in the DOM.

Planby vs Calendar-First Libraries

Calendar-first / unmaintained (FullCalendar, React Big Calendar, react-calendar-timeline)

  • —Month/week/day views are primary — timeline is an add-on
  • —Resources are an afterthought — no true row virtualization
  • —Slot-based time grid — events snap to grid intervals
  • —Custom rendering is limited to string templates or DOM injection
  • —Performance degrades past 500 events
  • —Timeline premium features cost $1,000+/year

Planby — timeline-first

  • Timeline is the primary and only view — no mode switching
  • Resources (channels) are first-class — built for many rows
  • Pixel-precise positioning — events start at any time
  • Custom rendering is plain React JSX components
  • 10,000+ events with constant performance via virtualization
  • Free tier + one-time PRO license — no annual fees

Live Demo — React Timeline Scheduler

The same component you see below powers shift schedulers, booking systems, and project timelines — not just TV guides.

🗓️ Advanced Scheduler

Scheduler

BusinessPersonalPlannerSchedule

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.

Full Example
Monitored global - 60 min (drag me)
Inverse flexibility - 22 min (drag me)
Secured paradigm - 45 min (drag me)
10:00am
11:00am
12:00pm
1:00pm
2:00pm
3:00pm

Why Choose Planby?

See how Planby stacks up against other solutions in the market

Feature

Planby

⭐ Best
FullCalendarSyncfusionCustom
React-first
Easy customization
TypeScript support
Virtualisation
Performance optimized
Drag & drop support
Regular updates
Mobile responsive
Setup time~10 min12 days15 daysMonths/Years

⚡ Lightning fast

💰 Most affordable

🎨 Easy customization

💎 Pricing Plans

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

⭐ MOST POPULAR

PRO

🚀

$

25

/ month

  • PRO exclusive features 🚀
  • 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
FAQ

React Timeline Scheduler FAQ

Common questions about using Planby as a general-purpose React timeline scheduler.

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

Build Any Timeline Scheduler in React

Shifts, bookings, projects, appointments — one component.

Try Live DemoReact Scheduler Docs

Explore More:

React Scheduler →Scheduler for Large Datasets →Planby vs FullCalendar →React EPG →React Planner →React Event Schedule →

planby

The most powerful React scheduler & timeline component for building modern scheduling interfaces.

Twitter

Product

HomeDemoPricingFor FramerWhy Planby

Resources

DocumentationChangelogSupport

Company

AboutContactPrivacyTerms

© 2026 Nessprim Karol Kozer. All rights reserved.

Built with ❤️ for developers