# TimeGrid View

> FullCalendar v6 documentation, for an old release. Web version: https://legacy.fullcalendar.io/v6/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.<!--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/timegrid
```

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/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 `timeGridWeek` and `timeGridDay`:

```js
import { Calendar } from '@fullcalendar/core'
import timeGridPlugin from '@fullcalendar/timegrid'

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

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


## Custom Duration

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

```js
import { Calendar } from '@fullcalendar/core'
import timeGridPlugin from '@fullcalendar/timegrid'

const calendar = new Calendar(calendarEl, {
  plugins: [timeGridPlugin],
  initialView: 'timeGridFourDay',
  views: {
    timeGridFourDay: {
      type: 'timeGrid',
      duration: { days: 4 }
    }
  }
})
```

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

## TimeGrid-specific Options

- [eventMinHeight](https://legacy.fullcalendar.io/v6/eventMinHeight.md) - In timeGrid view, the minimum height an event is allowed to be.
- [eventShortHeight](https://legacy.fullcalendar.io/v6/eventShortHeight.md) - In timeGrid view, the height threshold for when an event has a “short” style.
- [slotEventOverlap](https://legacy.fullcalendar.io/v6/slotEventOverlap.md) - Determines if timed events in TimeGrid view should visually overlap.
- [allDaySlot](https://legacy.fullcalendar.io/v6/allDaySlot.md) - Determines if the “all-day” slot is displayed at the top of the calendar.
- [All-Day Render Hooks](https://legacy.fullcalendar.io/v6/all-day-render-hooks.md) - Customize parts of the UI that typically display the text “all-day”.

## See Also

- [eventMaxStack](https://legacy.fullcalendar.io/v6/eventMaxStack.md) - For timeline view, the maximum number of events that stack top-to-bottom. For timeGrid view, the maximum number of events that stack left-to-right.
- [slotDuration](https://legacy.fullcalendar.io/v6/slotDuration.md) - The frequency for displaying time slots.
- [slotLabelFormat](https://legacy.fullcalendar.io/v6/slotLabelFormat.md) - Determines the text that will be displayed within a time slot.
- [slotLabelInterval](https://legacy.fullcalendar.io/v6/slotLabelInterval.md) - The frequency that the time slots should be labeled with text.
- [slotMinTime](https://legacy.fullcalendar.io/v6/slotMinTime.md) - Determines the first time slot that will be displayed for each day.
- [slotMaxTime](https://legacy.fullcalendar.io/v6/slotMaxTime.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.
- [expandRows](https://legacy.fullcalendar.io/v6/expandRows.md) - If the rows of a given view don’t take up the entire height, they will expand to fit.
- [nowIndicator](https://legacy.fullcalendar.io/v6/nowIndicator.md) - Whether or not to display a marker indicating the current time.
- [scrollTime](https://legacy.fullcalendar.io/v6/scrollTime.md) - Determines how far forward the scroll pane is initially scrolled.

## Demos

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