Docs Multi-Month Stack 6.1.0

You can create a specific type of Multi-Month Grid with a single column. The user must scroll to see months beyond the first. This is achieved by setting multiMonthMaxColumns to 1.

Either install via script tags or individual packages like so:

npm install --save \
  @fullcalendar/core \
  @fullcalendar/multimonth

Then initialize the calendar in JavaScript:

import { Calendar } from '@fullcalendar/core'
import multiMonthPlugin from '@fullcalendar/multimonth'

const calendar = new Calendar(calendarEl, {
  plugins: [multiMonthPlugin],
  initialView: 'multiMonthYear',
  multiMonthMaxColumns: 1 // force a single column
});

View a demo »

Months are separate by month headers that stick to the top of the scroll container. The text of the header is controlled by multiMonthTitleFormat.

There are numerous other options throughout the docs that affect the display of Multi-Month view, such as the date/time display options and locale-related options.

Without Month Headers

Want one continuous table of cells without month headers? See dayGridYear view »

Endless Scroll

Want endless scrolling of months that goes on forever? Follow this GitHub ticket »