# DayGrid View

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

A DayGrid view is a view with one or more columns, each representing a day. The pre-configured DayGrid views are **dayGridDay** and **dayGridWeek**. They can be initialized in an [ES6 setup](https://legacy.fullcalendar.io/v5/initialize-es6.md) like so:

```js
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
...
let calendar = new Calendar(calendarEl, {
  plugins: [ dayGridPlugin ],
  initialView: 'dayGridWeek'
});
...
```

Or you can choose to initialized DayGrid view [as a global bundle](https://legacy.fullcalendar.io/v5/initialize-globals.md):

```html
<link href='fullcalendar/main.css' rel='stylesheet' />
<script src='fullcalendar/main.js'></script>
<script>
...
var calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'dayGridWeek'
});
...
</script>
```

If you'd like a different interval of time, you can create a [custom view](https://legacy.fullcalendar.io/v5/custom-view-with-settings.md) with type `'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/v5/date-display.md) and [locale-related options](https://legacy.fullcalendar.io/v5/localization.md).

## Demos

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