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

Toolbar

The area at the top and bottom of the calendar that contains buttons and other controls.

CalendarController Use the calendar's data outside the calendar itself, such as in a custom toolbar.

Options

headerToolbar Defines the buttons and title at the top of the calendar.footerToolbar Defines the controls at the bottom of the calendar.titleFormat Determines the text that will be displayed in the headerToolbar's title.buttons Defines custom buttons for the toolbars, and overrides for the standard ones.buttonDisplay Controls whether toolbar buttons display an icon, text, or both.toolbarElements Defines an arbitrary custom html element for use in headerToolbar or footerToolbar.

Render Hooks

toolbar Customize the toolbar elements with ClassName Input settings.

Demo

Screenshot: Custom buttons and a footerToolbar Custom buttons and a footerToolbar
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