DEV Community

Pedro Lopes
Pedro Lopes

Posted on

FullCalendar is 500Kb. I built an alternative at 78Kb — with React, Vue & Angular support

#showdev #webdev #performance #javascript

If you've ever needed a calendar component in a web app, you've probably landed on FullCalendar. It's the industry default — and for good reason. It's feature-rich and battle-tested.

But here's what the docs don't tell you up front: the full bundle is over 500KB. It pulls in its own date library. The API surface is enormous. And if you just need a clean calendar with drag & drop, event fetching, and maybe a date picker — you're carrying a lot of weight you'll never use.

I noticed this problem while building a scheduling feature. I needed month/week/day views, async event loading from an API, drag & drop, and React compatibility. FullCalendar could do it, but it felt like using a freight elevator to go up one floor.

So I built SimpleCalendarJS.

SimpleCalendarJS Month View

What it does

  • 4 view modes — Month, Week, Day, and List
  • Drag & drop event moving and resizing
  • Date & range picker modes built-in
  • Async event fetching with fetchEvents: async (start, end) => { ... }
  • Official wrappers for React, Vue 3, and Angular
  • 34+ locales via the native Intl.DateTimeFormat API (no extra bundles)
  • RTL language support (Arabic, Hebrew, etc.)
  • Dark mode via CSS custom properties
  • Zero dependencies — pure vanilla JavaScript

And the entire thing is 78KB minified. The full package including framework wrappers is 76KB.

Getting started is genuinely simple 

npm install simple-calendar-js
Enter fullscreen mode Exit fullscreen mode 
import 'simple-calendar-js/dist/simple-calendar-js.min.css';

const calendar = new SimpleCalendarJs('#calendar', {
  defaultView: 'month',
  locale: 'en-US',
  fetchEvents: async (startDate, endDate) => {
    const res = await fetch('/api/events');
    return await res.json();
  },
  onEventClick: (event) => {
    console.log('Event clicked:', event);
  }
});
Enter fullscreen mode Exit fullscreen mode

For React:

import { SimpleCalendar } from 'simple-calendar-js/react';

function App() {
  return (
    <SimpleCalendar
      defaultView="month"
      locale="en-US"
      fetchEvents={async (start, end) => {
        const res = await fetch('/api/events');
        return res.json();
      }}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

SimpleCalendarJS Week View

The honest comparison

I'm not going to pretend SimpleCalendarJS does everything FullCalendar does — it doesn't. FullCalendar has more niche configuration options and a longer history of edge-case fixes.

But for the vast majority of real-world use cases — a scheduling UI, a booking widget, an event display, a date picker — SimpleCalendarJS covers the ground at a fraction of the size.

SimpleCalendarJS FullCalendar
Bundle size 78KB (min) ~500KB+
Dependencies Zero Requires own date lib
React / Vue / Angular ✅ ✅ (separate packages)
Drag & Drop ✅ ✅ (plugin required)
Date / Range Picker ✅ built-in ❌ (separate)
RTL Support ✅ ✅
Async events ✅ ✅
Dark mode ✅ CSS vars ✅
Free for open source ✅ ✅

Why bundle size matters more than you think

When you're server-side rendering a Next.js app or loading a React SPA on a mobile connection, 500KB vs 78KB is the difference between a 3-second interaction and an instant one. Calendar components often sit on high-traffic booking pages or dashboards. That weight compounds.

The Intl.DateTimeFormat API is already in every modern browser — there's no reason a calendar library needs to ship its own locale data. SimpleCalendarJS leans on what the platform gives you for free.

What's next

I'm actively working on the library and there's a public roadmap. If you hit a use case it doesn't cover, open an issue — that's genuinely how the feature list grows.

Try it

If it saves you time, a GitHub star helps more developers find it — small projects live and die by discoverability. 🙏

Top comments (0)