FullCalendar

FullCalendar is a full-featured JavaScript calendar library for rendering day, week, month, list, and multi-month event views with native drag-and-drop, resizing, and selection support. It ships as a framework-agnostic vanilla JS package alongside official bindings for React, Vue 3, Angular, and web components, all built on a shared @fullcalendar/core engine.

Beyond static event rendering, the library provides plugins for timezone handling (Luxon/Moment), recurring events (rrule), resource/timeline scheduling, and syncing with Google Calendar or iCalendar feeds, making it a common choice for booking systems, scheduling dashboards, and any UI needing an interactive calendar grid.

What You Get

• A vanilla JS fullcalendar package plus official React, Vue 3, Angular, and web-component wrappers
• Day grid, time grid, list, and multi-month view plugins that can be mixed and matched
• Native drag-and-drop event creation, resizing, and external-element dragging
• Timezone-aware date handling via Luxon or Moment.js plugins
• Recurring-event support via an rrule plugin and external calendar sync via Google Calendar/iCalendar plugins

Common Use Cases

• Booking and scheduling UIs (appointments, room reservations, staff shift calendars)
• Embedding a full month/week calendar view of events pulled from a backend API or Google Calendar
• Resource-timeline scheduling dashboards (e.g. assigning tasks or shifts across rows of people/rooms)
• Drag-and-drop rescheduling interfaces where end users can move or resize events directly in the UI

Under The Hood

Architecture: FullCalendar is a pnpm/Turborepo monorepo where @fullcalendar/core implements the shared rendering engine (a lightweight internal VDOM built on Preact), and view plugins (daygrid, timegrid, list, multimonth) register themselves against that core at runtime. The fullcalendar (vanilla) package in packages/vanilla is the umbrella package most consumers install — it depends on @fullcalendar/core plus a headless-calendar package that separates calendar state/logic from rendering, letting the React/Vue/Angular/web-component packages reuse the same headless logic with framework-specific renderers.

Tech Stack: Written in TypeScript, using Preact internally for VDOM diffing even though the vanilla build has no external framework dependency at the API level. Uses temporal-polyfill for modern date arithmetic, pnpm workspaces for monorepo management, and Turborepo for build orchestration across the many interdependent packages.

Code Quality: A dedicated packages/vanilla-tests package (plus per-framework test suites) exercises rendering, interaction, and plugin behavior; the long-lived, high-commit-volume history (6,500+ commits, active since 2009) reflects a mature, well-exercised codebase. Naming is consistent across the plugin system (public-api.ts, protected-api.ts separating consumer-facing surface from internals).

API Design: The plugin-based view system (daygrid, timegrid, list, interaction) keeps the core small while letting consumers opt into only the views/features they need, which is good for bundle size but does mean new users must learn which plugins to install for a given feature — a moderate but well-documented learning curve backed by extensive docs at fullcalendar.io.