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

Date Navigation

Methods and settings that determine the view’s current dates.

Options

initialDate The initial date displayed when the calendar first loads.dateIncrement How far into the future/past the calendar navigates when prev/next is executed.dateAlignment Determines the first visible day of a custom view.validRange Limits which dates the user can navigate to and where events can go.

Methods

Calendar::prev Moves the calendar one step back (by a month or week for example).Calendar::next Moves the calendar one step forward (by a month or week for example).Calendar::prevYear Moves the calendar back one year.Calendar::nextYear Moves the calendar forward one year.Calendar::today Moves the calendar to the current date.Calendar::gotoDate Moves the calendar to an arbitrary date.Calendar::incrementDate Moves the calendar forward/backward an arbitrary amount of time.Calendar::getDate Returns a Date for the current date of the calendar.

See Also

Date Nav Links Turns various datetime text into clickable links that the user can use for navigation.

Demo

Screenshot: Using external buttons with date API Using external buttons with date API
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