karolk

Posted on Aug 7

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

#webdev #react #javascript #reactnative

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

DEV Community