# TimeGrid View

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

A TimeGrid view displays one or more days side by side, against a vertical axis of time. The time axis usually runs from midnight to midnight. The two predefined TimeGrid views are the **timeGridWeek** and **timeGridDay** views. 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 timeGridPlugin from '@fullcalendar/timegrid';
...
let calendar = new Calendar(calendarEl, {
  plugins: [ timeGridPlugin ],
  defaultView: 'timeGridWeek'
});
...
```

Then you'll need to ensure the correct stylesheets are loaded. Please note that TimeGrid depends on the [DayGrid plugin](https://legacy.fullcalendar.io/v4/daygrid-view.md), so you'll need to manually include that stylesheet too:

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

Or you can choose to initialized the TimeGrid views [entirely with script tags](https://legacy.fullcalendar.io/v4/initialize-globals.md). Please note that TimeGrid depends on the [DayGrid plugin](https://legacy.fullcalendar.io/v4/daygrid-view.md), so you'll need to manually include those tags too:

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

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

TimeGrid views of other durations can be made with a [custom view](https://legacy.fullcalendar.io/v4/custom-view-with-settings.md) with type `'timeGrid'`.

The following options are specific to TimeGrid view. However, there are numerous other options throughout the docs that affect the display of TimeGrid 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).

## TimeGrid-specific Options

- [allDaySlot](https://legacy.fullcalendar.io/v4/allDaySlot.md) - Determines if the “all-day” slot is displayed at the top of the calendar.
- [allDayText](https://legacy.fullcalendar.io/v4/allDayText.md) - The text titling the “all-day” slot at the top of the calendar.
- [slotEventOverlap](https://legacy.fullcalendar.io/v4/slotEventOverlap.md) - Determines if timed events in TimeGrid view should visually overlap.
- [timeGridEventMinHeight](https://legacy.fullcalendar.io/v4/timeGridEventMinHeight.md) - Guarantees that events within the TimeGrid views will be a minimum height.

## See Also

- [slotDuration](https://legacy.fullcalendar.io/v4/slotDuration.md) - The frequency for displaying time slots.
- [slotLabelFormat](https://legacy.fullcalendar.io/v4/slotLabelFormat.md) - Determines the text that will be displayed within a time slot.
- [slotLabelInterval](https://legacy.fullcalendar.io/v4/slotLabelInterval.md) - The frequency that the time slots should be labeled with text.
- [minTime](https://legacy.fullcalendar.io/v4/minTime.md) - Determines the first time slot that will be displayed for each day.
- [maxTime](https://legacy.fullcalendar.io/v4/maxTime.md) - Determines the last time slot that will be displayed for each day. In line with the discussion about the Event object, it is important to stress that this should be specified as an exclusive end time.
- [nowIndicator](https://legacy.fullcalendar.io/v4/nowIndicator.md) - Whether or not to display a marker indicating the current time.
- [scrollTime](https://legacy.fullcalendar.io/v4/scrollTime.md) - Determines how far forward the scroll pane is initially scrolled.

## Demos

- [timeGridWeek and timeGridDay views](https://legacy.fullcalendar.io/v4/timegrid-standard-view-demo)
- [Custom 4-day TimeGrid view](https://legacy.fullcalendar.io/v4/timegrid-custom-view-demo)