# Multi-Month Grid

> FullCalendar v7 documentation. Web version: https://fullcalendar.io/docs/multimonth-grid

The Multi-Month view displays multiple individual months. Either install via [script tags](https://fullcalendar.io/docs/vanilla-js.md#via-script-tags) or [ES build system](https://fullcalendar.io/docs/vanilla-js.md#via-npm).

There are numerous other options throughout the docs that affect the display of Multi-Month view, such as the [date/time display options](https://fullcalendar.io/docs/date-display.md) and [locale-related options](https://fullcalendar.io/docs/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](https://fullcalendar.io/docs/singleMonthMinWidth.md) setting ultimately determines the number of columns. Example:

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

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

[View a live demo →](https://fullcalendar.io/docs/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 →](https://fullcalendar.io/docs/multimonth-stack.md)



## Custom Duration

You can create Multi-Month views [with arbitrary durations](https://fullcalendar.io/docs/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 }
    }
  }
})
```

## View-Specific Options

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

## Render Hooks

- [singleMonth](https://fullcalendar.io/docs/single-month-render-hooks.md) - Customize the appearance of each individual month within Multi-Month view.
- [singleMonthHeader](https://fullcalendar.io/docs/single-month-header-render-hooks.md) - Customize the month headers in Multi-Month view.

## See Also

- [showNonCurrentDates](https://fullcalendar.io/docs/showNonCurrentDates.md) - In month view, whether dates in the previous or next month should be rendered at all.
- [fixedWeekCount](https://fullcalendar.io/docs/fixedWeekCount.md) - Determines the number of weeks displayed in a month view.
- [businessHours](https://fullcalendar.io/docs/businessHours.md) - Emphasizes certain time slots on the calendar.
- [weekends](https://fullcalendar.io/docs/weekends.md) - Whether to include Saturday/Sunday columns in any of the calendar views.

## Demos

- [multiMonthYear as a grid](https://fullcalendar.io/docs/multimonth-grid-demo)