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

Karol KozerKarol Kozer
3 min read

😩 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:

  1. Virtual rendering – only what's visible is rendered

  2. 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.

0
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.