# DayGrid View

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

A DayGrid view displays one or more cells, each representing a day.<!--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/daygrid
```

There are numerous other options throughout the docs that affect the display of DayGrid 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).


## Week & Day View

The following example shows how to toggle between `dayGridWeek` and `dayGridDay`:

```js
import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'

const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin],
  initialView: 'dayGridWeek',
  headerToolbar: {
    left: 'prev,next',
    center: 'title',
    right: 'dayGridWeek,dayGridDay' // user can switch between the two
  }
})
```

[View a demo &raquo;](https://legacy.fullcalendar.io/v6/daygrid-view-demo)


## Month View

The `dayGridMonth` view is the most common. [View docs specifically for month view &raquo;](https://legacy.fullcalendar.io/v6/month-view.md)


## Year View

The `dayGridYear` view shows one continuous grid of cells for an entire year. The user most scroll. The first cell of each month is emphasized, as controlled by [monthStartFormat](https://legacy.fullcalendar.io/v6/monthStartFormat.md).

```js
import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'

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

[View a demo &raquo;](https://legacy.fullcalendar.io/v6/daygridyear-view-demo)

`dayGridYear` view was added in **v6.1.0**.


## Custom Duration

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

```js
import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'

const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin],
  initialView: 'dayGridFourWeek',
  views: {
    dayGridFourWeek: {
      type: 'dayGrid',
      duration: { weeks: 4 }
    }
  }
})
```

## Daygrid-specific Options

- [monthStartFormat](https://legacy.fullcalendar.io/v6/monthStartFormat.md) - The date format for the first cell of each month, when a dayGrid view spans several months.

## Demos

- [dayGridWeek and dayGridDay views](https://legacy.fullcalendar.io/v6/daygrid-view-demo)
- [dayGridYear view](https://legacy.fullcalendar.io/v6/daygridyear-view-demo)