Guide · Open source

How to use FullCalendar: install, render a calendar and enable drag and drop

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

FullCalendar is a full-sized drag and drop event calendar library for web pages, written in JavaScript and TypeScript and released under the MIT licence. It is aimed at developers who want to add a scheduling or event calendar to an existing site or app. After this guide, you will be able to install the vanilla-JS package, render a month view with a few events, and turn on drag-and-drop editing.

FullCalendarfullcalendar/fullcalendar · ★ 20.7k · MIT Install options & downloads

Quick start

1Check prerequisites. Make sure Node.js and npm are installed on your machine.
2Install the package. Run npm install fullcalendar temporal-polyfill in your project folder.
3Import Calendar and plugins. Import Calendar, the classic theme, the day grid plugin and the interaction plugin, plus their CSS files.
4Add a container element. Place an element with an id such as calendar in your HTML and fetch it with document.getElementById.
5Create the calendar. Instantiate Calendar with the plugins, initialView set to dayGridMonth, editable set to true and an events array.
6Render it. Call calendar.render() to display the calendar on the page.

What FullCalendar is and who it is for

FullCalendar is a calendar widget you add to your own web page. It shows events in views such as months, and when editing is turned on, users can drag events around. It is a library to integrate, not a ready-made calendar application.

The project provides connectors for React, Angular, Vue, Preact, Web Components and Salesforce LWC, so teams using those frameworks can use a matching connector.

Good fit: web developers adding a scheduling or event calendar to an existing site
Good fit: React, Angular or Vue teams that need a calendar view
Good fit: projects that need drag-and-drop event editing in the browser
Not a fit: non-developers looking for an end-user calendar app
Not a fit: projects that cannot use the npm and build-tool workflow

Install FullCalendar with npm

You need Node.js and npm. Install the vanilla-JS package together with its `temporal-polyfill` peer dependency. The README links to separate documentation about the polyfill.

If you want to work on the repository itself rather than use the package, the README says to install dependencies with pnpm instead.

Use case: application install with npm
Repository development: pnpm is required by the README

npm install fullcalendar temporal-polyfill

Create a calendar and render it

Import `Calendar` from the package, then import the plugins you need. The example uses the classic theme, the day grid view and the interaction plugin. Import the matching CSS files as well.

Create a Calendar with a DOM element, pass the plugins and options, and call `render()`. The `initialView` option is set to `dayGridMonth`, and `events` takes a list of objects with a title and start date.

`plugins`: the list of plugins to load, such as the day grid and interaction plugins
`initialView`: the view shown first, here `dayGridMonth`
`editable`: set to `true` to allow editing such as dragging events
`events`: an array of event objects, each with a `title` and `start`

import { Calendar } from 'fullcalendar'
import classicThemePlugin from 'fullcalendar/themes/classic'
import dayGridPlugin from 'fullcalendar/daygrid'
import interactionPlugin from 'fullcalendar/interaction'

import 'fullcalendar/skeleton.css'
import 'fullcalendar/themes/classic/theme.css'
import 'fullcalendar/themes/classic/palette.css'

const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
  plugins: [
    classicThemePlugin,
    dayGridPlugin,
    interactionPlugin
  ],
  initialView: 'dayGridMonth',
  editable: true,
  events: [
    { title: 'Meeting', start: new Date() }
  ]
})

calendar.render()

Enable drag-and-drop event editing

Drag and drop depends on two things in the example: the `interactionPlugin` is included in the plugins list, and `editable` is set to `true`. Without editing turned on, users can view events but not move them.

The source README does not describe further event-editing callbacks, so check the official documentation at the project website for those details.

Include `interactionPlugin` in `plugins`
Set `editable: true` in the options

Set up the repository for development

If you are contributing or changing the library, install the repo with PNPM. The README lists the available scripts, which you run with `pnpm run <script>`.

`build`: build production-ready dist files
`dev`: build and watch development dist files
`test`: test headlessly
`test:dev`: test interactively
`lint`: lint the code
`clean`: clean the build output

pnpm install

Where to find more detail

The README links to the project documentation, a changelog, a support page and a roadmap. Framework-specific details are in the connector documentation for React, Angular, Vue, Preact, Web Component and Salesforce LWC.

The README also points to a separate page about the temporal-polyfill dependency, which you should read if you are unsure why it is required.

Documentation: fullcalendar.io/docs
Support: fullcalendar.io/support
Roadmap: fullcalendar.io/roadmap

What people use it for

Showing a monthly schedule of meetings on a company website
Adding an event calendar to a React, Angular or Vue application
Letting users drag events to new dates in a browser-based planner
Building a scheduling interface inside a Salesforce LWC component

Frequently asked questions

Is FullCalendar free to use?

FullCalendar is released under the MIT licence, as stated in the project's README and metadata. Check the LICENSE.md file in the repository for the full licence text before using it in your project.

How do I install FullCalendar?

Run npm install fullcalendar temporal-polyfill. The package is the vanilla-JS version, and temporal-polyfill is its peer dependency.

Does FullCalendar need React or another framework?

No. The vanilla-JS package works on its own. The README also lists connectors for React, Angular, Vue, Preact, Web Component and Salesforce LWC if you use one of those frameworks.

How do I make events draggable?

Include the interaction plugin in the plugins list and set editable to true in the options, as shown in the usage example.

What are good alternatives to FullCalendar?

The project lists Toast UI Calendar, react-big-calendar, DayPilot Lite and Schedule-X as comparable projects. Pick based on your framework and the features you need.

Can non-developers use FullCalendar directly?

Not as a finished app. FullCalendar is a library that developers integrate into a web page or application, so someone needs to write code to use it.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

FullCalendar suits web developers who want a full-featured, drag-and-drop calendar inside their own site or React, Angular, Vue or other supported app, and who are comfortable with npm and a build tool. If you want a ready-made calendar application for end users, or your project cannot use an npm workflow, pick a different tool from the comparable projects listed.

Install options & downloads