New look, new major release. Read the post →
FullCalendar
  • v7 latest
  • v6 (opens in a new tab)
  • v5 (opens in a new tab)
  • v4 (opens in a new tab)
  • v3 (opens in a new tab)
  • v2 (opens in a new tab)
  • v1 (opens in a new tab)
DemosDocs
  • Getting Help
  • Debug Templates
  • Reporting Bugs
  • Requesting Features
  • Contributing
Pricing
20.7k
  • Demos
  • Docs
  • Support
  • Getting Help
  • Debug Templates
  • Reporting Bugs
  • Requesting Features
  • Contributing
  • Pricing

Getting Started

  • React
  • Vue
  • Angular
  • Vanilla JS
  • Preact
  • Web Component
  • Salesforce LWC

Tools & Plugins

  • Agent Guide
  • Plugins
  • Premium
  • V7 Migration

Overall Display

  • Theme
  • Toolbar
  • Sizing
  • Virtual Rendering
  • Locale

Views

  • Month
  • TimeGrid
  • List
  • DayGrid
  • Multi-Month Stack
  • Multi-Month Grid
  • Timeline
  • Vertical Resource
  • Custom Views
  • View API

Date & Time

  • Date Model
  • Time Zone
  • Date & Time Display
  • Date Navigation
  • Date Nav Links
  • Week Numbers
  • Date Clicking & Selecting
  • Now Indicator
  • Business Hours

Events

  • Event Model
  • Event Sources
  • Event Display
  • Event Clicking & Hovering
  • Event Dragging & Resizing
  • Event Popover
  • Background Events

Resources

  • Resource Data
  • Resource Display

Accessibility

  • Accessibility
  • Touch Support
  • Printer-Friendly Rendering
  1. All Docs

Theme

Change the look of the calendar. Pick one of the five stock themes and a color palette, use a theme that follows your component library, or build your own.

Stock Themes

Stock Themes The five themes that ship with FullCalendar, and how to install one in each framework.Color Palettes Each of the 5 stock themes comes with its own "palettes", which define its color values.

Component Library Themes

Shadcn Ready-made React components, installed from a Shadcn registry into your own codebase.MUI Ready-made React components that inherit your Material UI theme.Bootstrap 5 FullCalendar can take its look from your Bootstrap 5 theme.

Build Your Own

Custom Themes Build your own theme from class-name props, one for each element in the calendar.ClassName Inputs Add your own CSS class names to the calendar's elements.Render Hook Index A quick index of render-hook articles, and the hooks each one exposes.

Options

className Provides a ClassName Input for the calendar's root element.borderless settings Remove borders from the calendar's outer edge.
FullCalendar
Get started →
  • Blog
  • · Roadmap
  • · License
  • · Giving
v7.1.1 Released Oct 6, 2026 All releases →

Integration Docs

  • React 7.7M/MO
  • Vue 850K/MO
  • Angular 930K/MO
  • Vanilla JS 2.5M/MO
  • Preact
  • Web Component

Also from FullCalendar

temporal-polyfill

The Temporal API, polyfilled in under 20 kB.

18M downloads / month

© 2026 FullCalendar LLC

Built and maintained by Adam Shaw