https://github.com/fullcalendar/fullcalendar
Full-sized drag & drop event calendar in JavaScript
https://github.com/fullcalendar/fullcalendar
calendar event full-sized
Last synced: 18 days ago
JSON representation
Full-sized drag & drop event calendar in JavaScript
- Host: GitHub
- URL: https://github.com/fullcalendar/fullcalendar
- Owner: fullcalendar
- License: mit
- Created: 2009-11-22T23:16:51.000Z (almost 17 years ago)
- Default Branch: main
- Last Pushed: 2026-10-16T03:03:44.000Z (21 days ago)
- Last Synced: 2026-10-17T21:24:56.887Z (19 days ago)
- Topics: calendar, event, full-sized
- Language: TypeScript
- Homepage: https://fullcalendar.io
- Size: 34 MB
- Stars: 20,696
- Watchers: 422
- Forks: 3,718
- Open Issues: 1,110
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome - fullcalendar/fullcalendar - Full-sized drag & drop event calendar in JavaScript (TypeScript)
- awesome-starred - fullcalendar/fullcalendar - Full-sized drag & drop event calendar in JavaScript (others)
- awesome-javascript - fullcalendar - Full-sized drag & drop event calendar ` 📝 11 days ago` (Form Widgets [🔝](#readme))
- awesome-javascript-cn - 官网
- awesome-javascript - fullcalendar - Full-sized drag & drop event calendar - ★ 8430 (Form Widgets)
- awesome-typescript - fullcalendar/fullcalendar - Full-sized drag & drop event calendar in JavaScript (Web / Frontend and UI Components)
- A-collection-of-awesome-browser-side-JavaScript-libraries-resources-and-shiny-things. - fullcalendar - Full-sized drag & drop event calendar (jQuery plugin). (Form Widgets / Calendar)
- awesome-javascript-cn - fullcalendar
- stars - fullcalendar/fullcalendar - Full-sized drag & drop event calendar in JavaScript (TypeScript)
- fucking-awesome-javascript - fullcalendar - Full-sized drag & drop event calendar (jQuery plugin). (Form Widgets / Calendar)
- awesome-javascript - fullcalendar - Full-sized drag & drop event calendar (jQuery plugin). (Form Widgets / Calendar)
- awesome-github-projects - fullcalendar - Full-sized drag & drop event calendar in JavaScript ⭐20,682 `TypeScript` 🔥 (🔧 Utilities & Miscellaneous)
- stars - fullcalendar - sized drag & drop event calendar in JavaScript | fullcalendar | 20698 | (TypeScript)
README
# FullCalendar
Full-sized drag & drop calendar in JavaScript
- [Project Website](https://fullcalendar.io/)
- [Documentation](https://fullcalendar.io/docs)
- [Changelog](CHANGELOG.md)
- [Support](https://fullcalendar.io/support)
- [License](LICENSE.md)
- [Roadmap](https://fullcalendar.io/roadmap)
Connectors:
- [React](https://fullcalendar.io/docs/react)
- [Angular](https://fullcalendar.io/docs/angular)
- [Vue](https://fullcalendar.io/docs/vue)
- [Preact](https://fullcalendar.io/docs/preact)
- [Web Component](https://fullcalendar.io/docs/web-component)
- [Salesforce LWC](https://fullcalendar.io/docs/salesforce-lwc)
## Installation
Install the FullCalendar vanilla-JS package and its `temporal-polyfill` peer dependency ([more info](https://fullcalendar.io/docs/temporal-polyfill)):
```sh
npm install fullcalendar temporal-polyfill
```
## Usage
Instantiate a Calendar with plugins and options:
```js
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()
```
## Development
You must install this repo with [PNPM](https://pnpm.io/):
```
pnpm install
```
Available scripts (via `pnpm run `):
- `build` - build production-ready dist files
- `dev` - build & watch development dist files
- `test` - test headlessly
- `test:dev` - test interactively
- `lint`
- `clean`
[Info about contributing code »](CONTRIBUTING.md)