How I Built a Lightweight React Calendar That’s 3 Faster Than FullCalendar


😩 The problem with existing React calendars
I love open source. But let's be honest – most calendar or timeline components in React either feel:
bloated (looking at you, FullCalendar)
janky on performance when rendering 100+ events
terrible to style and extend
I needed something that could:
render hundreds of time blocks smoothly
support virtual scrolling
play nice with React state
actually look like something from the 2020s
So I built Planby – a lightweight, modern React timeline/calendar component.
⚡ Meet Planby: A faster, cleaner React timeline
Planby is a customizable, virtualized calendar/timeline component for React and React Native. It supports complex layouts like:
📺 TV program guides (EPG)
🎵 Music festival schedules
🗓️ Multi-day event timelines
📅 Booking and shift management apps
And it’s ~3× faster than FullCalendar in real-world scenarios with 500+ events.
🧠 How it works (without getting too nerdy)
Planby is built around two things:
Virtual rendering – only what's visible is rendered
Canvas-like layout logic – but built entirely in React/DOM
That means:
Smooth performance, even on mobile
Minimal re-renders
Easy customization through React components and props
👇 Here’s how you use it
import { useEpg, Epg, Layout } from '@nessprim/planby-pro';
const channels = React.useMemo(() => [
{
logo: 'https://via.placeholder.com',
uuid: '10339a4b-7c48-40ab-abad-f3bcaf95d9fa',
title: 'Channel 1',
},
], []);
const epg = React.useMemo(() => [
{
channelUuid: '10339a4b-7c48-40ab-abad-f3bcaf95d9fa',
id: 'b67ccaa3-3dd2-4121-8256-33dbddc7f0e6',
image: 'https://via.placeholder.com',
title: 'My cool show',
description: 'Ut anim nisi consequat minim deserunt...',
since: "2025-07-02T20:00:00",
till: "2025-07-02T21:00:00",
},
], []);
const {
getEpgProps,
getLayoutProps,
onScrollToNow,
onScrollLeft,
onScrollRight,
} = useEpg({
epg,
channels,
startDate: '2024/02/02',
});
return (
<div style={{ height: '600px', width: '1200px' }}>
<Epg {...getEpgProps()}>
<Layout {...getLayoutProps()} />
</Epg>
</div>
);
That’s it. Fully functional timeline view. Customizable headers, drag & drop, time indicators — all extendable.
🚀 Why it’s faster
✅ Uses memoized layout calculations
✅ Virtual scroll powered by requestAnimationFrame
✅ No legacy jQuery-style DOM hacks
✅ Built with React 18 in mind (Concurrent Mode ready)
In benchmarks against FullCalendar, Planby renders:
~300% faster initial load with 500+ events
~80% fewer re-renders on scroll
significantly smoother on mobile
🎯 Use cases in the wild
Here’s what people are using Planby for:
TV & streaming guides
Music festival schedules
Logistics shift planning
Healthcare staff rotas
Conference schedules
Even live event dashboards with "Scroll to Now" feature
🔧 Extend it how you want
Need drag & drop? Timezones? Daily/weekly views?
Planby gives you the layout engine — the rest is up to you.
It’s a library, not a framework.
💡 Why I built it
I was building an internal EPG (Electronic Program Guide) tool and got fed up with:
clunky APIs
poor mobile UX
giant bundles
I wrote this post out of frustration.
Now Planby has React Native support, and is used by media companies, startups, and indie hackers alike.
Subscribe to my newsletter
Read articles from Karol Kozer directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

Karol Kozer
Karol Kozer
My name is Karol, I'm Senior Software Engineer. I am an enthusiast of JavaScript, React and all Front-End field technologies.