# Multi-Month Grid

The Multi-Month view displays multiple individual months.<!--more--> Either install via [script tags](initialize-globals.md) or [ES build system](initialize-es6.md).

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


## Year as a Grid

The `multiMonthYear` view displays a 3x4 grid of months. However, if space does not allow, it will responsively shift to 2x6 or even 1x12. The [singleMonthMinWidth](singleMonthMinWidth.md) setting ultimately determines the number of columns. Example:

```js
import { Calendar } from 'fullcalendar'
import multiMonthPlugin from 'fullcalendar/multimonth'

let calendar = new Calendar(calendarEl, {
  plugins: [multiMonthPlugin],
  initialView: 'multiMonthYear'
})
```

[View a live demo &raquo;](multimonth-grid-demo)


## Year as a Stack

The `multiMonthYear` view can be configured as a single column (aka "stack"). [View docs specifically for Multi-Month Stack &raquo;](multimonth-stack.md)



## Custom Duration

You can create Multi-Month views [with arbitrary durations](custom-view-with-settings.md). The following creates a 4-month view:

```js
import { Calendar } from 'fullcalendar'
import multiMonthPlugin from 'fullcalendar/multimonth'

const calendar = new Calendar(calendarEl, {
  plugins: [multiMonthPlugin],
  initialView: 'multiMonthFourMonth',
  views: {
    multiMonthFourMonth: {
      type: 'multiMonth',
      duration: { months: 4 }
    }
  }
})
```

## Articles

- [Single Month Render Hooks](single-month-render-hooks.md) - Customize the appearance of each individual month within Multi-Month view.
- [Single Month Header Render Hooks](single-month-header-render-hooks.md) - In Multi-Month view, the month header is the title element above each month grid (e.g. "January 2025").

## Multimonth-specific Options

- [multiMonthMaxColumns](multiMonthMaxColumns.md) - The maximum columns of months that Multi-Month Grid will attempt to render.
- [singleMonthMinWidth](singleMonthMinWidth.md) - Multi-Month Grid will not allow each mini-month to be become smaller than this pixel value. This value includes padding.
- [singleMonthTitleFormat](singleMonthTitleFormat.md) - In Multi-Month views, the format of the text above each month.

## See Also

- [showNonCurrentDates](showNonCurrentDates.md) - In month view, whether dates in the previous or next month should be rendered at all.
- [fixedWeekCount](fixedWeekCount.md) - Determines the number of weeks displayed in a month view.
- [businessHours](businessHours.md) - Emphasizes certain time slots on the calendar. By default, Monday-Friday, 9am-5pm.
- [weekends](weekends.md) - Whether to include Saturday/Sunday columns in any of the calendar views.

## Demos

- [multiMonthYear as a grid](multimonth-grid-demo)