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:

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: "2024-02-02T20:00:00",
    till: "2024-02-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.