FullCalendar
A JavaScript calendar component you can drag and drop events on, for web apps.
- Stars
- 20.7k
- Forks
- 3.7k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 21 days ago
- Type
- Library
What it is
FullCalendar is a full-sized calendar widget for web pages, written in JavaScript and TypeScript. Developers add it to their site or app to show events in views like months, and users can drag events around when editing is turned on. It also ships connectors for React, Angular, Vue, Preact, Web Components and Salesforce LWC.
- Show a monthly calendar of meetings or events on a web page
- Let users drag events to new dates when editable mode is on
- Embed the calendar inside a React, Vue, or Angular application using the matching connector
Great for
- Web developers adding a scheduling or event calendar to an existing site
- Teams building a React, Angular, or Vue app that needs a calendar view
- Projects that need drag-and-drop event editing in the browser
Not ideal for
- Non-developers looking for a ready-made calendar app, since this is a library to integrate, not an end-user app
- Projects that cannot use the npm and build-tool workflow the README describes
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm (or pnpm for working on the repo itself)
Install the vanilla-JS package and its peer dependency
npm install fullcalendar temporal-polyfillInstall dependencies for the repo (development)
pnpm install - 2
Run it
- Install the package with npm install fullcalendar temporal-polyfill.
- Add a div with an id of calendar to your HTML page.
- Import Calendar, the plugins you need, and the CSS files shown in the README.
- Create a new Calendar with your plugins and options, then call calendar.render().
- 3
Get the most out of it
- Use the dayGridMonth initial view and the editable option to enable drag and drop, as in the README example.
- Pick a framework connector (React, Angular, Vue, Preact, Web Component, or LWC) if your app uses one.
- Read the official documentation at fullcalendar.io/docs for the full list of options and plugins.
- Choose a theme plugin and its CSS files to style the calendar.
Downloads
Strengths
- Installs through npm and is used by instantiating a Calendar with plugins and options, as shown in the README
- Has official connectors for several popular frameworks
- Released under the MIT license
Trade-offs
- Requires the temporal-polyfill peer dependency, which adds setup
- Setup involves choosing plugins and importing CSS themes, so it takes some configuration
- The README is short; detailed options are referred to the external documentation
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| fullcalendar (this) | 20.7k | Library | intermediate | 21 days ago | Web developers adding a scheduling or event calendar to an existing site |
| tui.calendar | 12.7k | Library | intermediate | 2.4 years ago | Web developers adding a schedule view to an existing site or web app |
| react-dates | 12.2k | Library | intermediate | 2.6 years ago | React developers who need a date or date-range picker in a web app |
| mitt | 11.9k | Library | beginner | 2.2 years ago | Frontend developers who want simple component-to-component messaging without a large framework |
| react-native-calendars | 10.3k | Library | beginner | 20 days ago | React Native developers who need a calendar or date picker screen |
| FSCalendar | 10.6k | Library | intermediate | 2.2 years ago | iOS developers who need a calendar or date-picker view in their app |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.