# DayGrid View

> FullCalendar v4 documentation, for an old release. Web version: https://legacy.fullcalendar.io/v4/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/v4/initialize-es6.md) like so:

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

Then you'll need to ensure the correct stylesheets are loaded:

```html
<link href='node_modules/@fullcalendar/core/main.css' rel='stylesheet' />
<link href='node_modules/@fullcalendar/daygrid/main.css' rel='stylesheet' />
```

Or you can choose to initialized DayGrid view [entirely with script tags](https://legacy.fullcalendar.io/v4/initialize-globals.md):

```html
<link href='fullcalendar/core/main.css' rel='stylesheet' />
<link href='fullcalendar/daygrid/main.css' rel='stylesheet' />

<script src='fullcalendar/core/main.js'></script>
<script src='fullcalendar/daygrid/main.js'></script>
<script>
...
var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'dayGrid' ],
  defaultView: 'dayGridWeek'
});
...
</script>
```

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

## Demos

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