Full internationalization. Framework wrappers for React, Vue & Angular. Built-in date & range picker modes. Everything you need in ~14 KB of gzipped JavaScript.
Zero dependencies · Free for personal use · Commercial license per project
Using this in a commercial project? A license is required →
Pure vanilla JavaScript. No external libraries required. Just ~18 KB gzipped.
Native Intl.DateTimeFormat API support for any locale. RTL languages included.
Official React, Vue 3, and Angular components included in the package.
Fetch events dynamically with async/await. Perfect for API integrations.
CSS custom properties for easy theming. Dark mode ready out of the box.
Works perfectly on desktop, tablet, and mobile. Touch-friendly interface.
The views most apps need, in a fraction of the size of the usual choices.
| SimpleCalendarJS | FullCalendar | React Big Calendar | |
|---|---|---|---|
| Gzipped JS size | ~14 KB | ~40 KB | ~52 KB |
| Dependencies | None | Preact + Temporal polyfill | 16 packages |
| Works with | Any framework or plain JS | Any framework (adapters) | React only |
| Month, week & day views | |||
| List view | Agenda | ||
| Built-in date & range picker | |||
| Drag & drop | Add-on | ||
| License | Free personal / paid commercial | MIT core / paid Premium | MIT |
JavaScript only, gzipped, per bundlephobia (November 2026): fullcalendar 7.1, react-big-calendar 1.20. Full comparison →
Free for personal projects. A per-project commercial license is required when you ship SimpleCalendarJS in a paid product, client site, or SaaS application.
No license needed
Personal projects, side projects with no revenue, learning, and open source. The npm package is free and fully functional.License required
Commercial products, client websites, SaaS, internal company tools, or any project that generates revenue. One license covers one project.For personal projects, learning, and open source.
For commercial projects that need ongoing support and updates.
Pay once, use forever. No renewals, no surprises.
Perfect for date pickers, booking systems, and range selection
Get started in seconds with your favorite framework
npm install simple-calendar-jsimport SimpleCalendarJs from 'simple-calendar-js';
import 'simple-calendar-js/dist/simple-calendar-js.min.css';
// <div id="calendar" style="height: 600px"></div>
const calendar = new SimpleCalendarJs('#calendar', {
defaultView: 'month',
locale: 'en-US',
fetchEvents: async (start, end) => {
const res = await fetch(`/api/events?start=${start.toISOString()}&end=${end.toISOString()}`);
return await res.json(); // [{ id, title, start, end }, ...]
},
onEventClick: (event) => {
console.log('Event clicked:', event);
},
onSlotClick: (date) => {
console.log('Slot clicked:', date);
}
});