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

Pedro Lopes — Fri, 20 Mar 2026 11:50:51 +0000

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.

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

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);
  }
});

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();
      }}
    />
  );
}

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

🌐 Website & live sandbox: simplecalendarjs.com
📦 npm: simple-calendar-js
⭐ GitHub: pclslopes/SimpleCalendarJs

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