# Multi-Month Grid

> FullCalendar v6 documentation, for an old release. Web version: https://legacy.fullcalendar.io/v6/multimonth-grid
>
> Latest version (v7): https://fullcalendar.io/docs/multimonth-grid.md

The Multi-Month view displays multiple individual months.<!--more--> Either install via [script tags](https://legacy.fullcalendar.io/v6/initialize-globals.md) or [individual packages](https://legacy.fullcalendar.io/v6/initialize-es6.md) like so:

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

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

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

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

[View a live demo &raquo;](https://legacy.fullcalendar.io/v6/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;](https://legacy.fullcalendar.io/v6/multimonth-stack.md)



## Custom Duration

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

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

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

## Multimonth-specific Options

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

## See Also

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

## Demos

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