# TimeGrid View

A TimeGrid view displays one-or-more horizontal days as well as an axis of time, usually midnight to midnight, on the vertical axis.<!--more--> Either install via [script tags](initialize-globals.md) or [ES build system](initialize-es6.md).

There are numerous other options throughout the docs that affect the display of TimeGrid view, such as the [date/time display options](date-display.md) and [locale-related options](localization.md).


## Week & Day View

The following example shows how to toggle between `timeGridWeek` and `timeGridDay`:

```js
import { Calendar } from 'fullcalendar'
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;](timegrid-standard-view-demo)


## Custom Duration

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

```js
import { Calendar } from 'fullcalendar'
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;](timegrid-custom-view-demo)

## Articles

- [Week Number Header Render Hooks](week-number-header-render-hooks.md) - In TimeGrid view, week numbers appear in the header above the time axis. Customize their appearance with these hooks.
- [All-Day Header Render Hooks](all-day-header-render-hooks.md) - Customize the cell in the header area of TimeGrid view that labels the all-day section.
- [All-Day Divider Render Hooks](all-day-divider-render-hooks.md) - Customize the divider line beneath the all-day section in TimeGrid view.
- [Day-Lane Render Hooks](day-lane-render-hooks.md) - In TimeGrid view, a "day lane" is the vertical column of time slots for a given day. Customize its appearance with these hooks.

## TimeGrid-specific Options

- [eventMinHeight](eventMinHeight.md) - In timeGrid view, the minimum height an event is allowed to be.
- [eventShortHeight](eventShortHeight.md) - In timeGrid view, the height threshold for when an event has a "short" style.
- [slotEventOverlap](slotEventOverlap.md) - Determines if timed events in TimeGrid view should visually overlap.
- [slotMinHeight](slotMinHeight.md) - Determines how tall each of the time-axis slots will be. Specified as a number of pixels.
- [allDaySlot](allDaySlot.md) - Determines if the "all-day" slot is displayed at the top of the calendar.
- [eventPrintLayout](eventPrintLayout.md) - Controls how events are rendered in TimeGrid view when printing. Browsers, especially Firefox, have a tough time displaying absolutely-positioned elements across pages, which makes TimeGrid view especially problematic for print.

## See Also

- [eventMaxStack](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](slotDuration.md) - The frequency for displaying time slots.
- [slotHeaderFormat](slotHeaderFormat.md) - Determines the text that will be displayed within a time slot.
- [slotHeaderInterval](slotHeaderInterval.md) - The frequency that the time slots should be labelled with text.
- [slotMinTime](slotMinTime.md) - Determines the first time slot that will be displayed for each day.
- [slotMaxTime](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.
- [Slot Header Render Hooks](slot-header-render-hooks.md) - Customize the slot header elements — where the date/time text is displayed — in timegrid and timeline views.
- [Slot Lane Render Hooks](slot-lane-render-hooks.md) - Customize the slot lane elements in timegrid and timeline views. The lane is the long span of content next to the slot's date/time text. In timegrid view, this is the horizontal space that passes under all of the days. In timeline view, this is the vertical space that passes through the resources.
- [expandRows](expandRows.md) - If the rows of a given view don't take up the entire height, they will expand to fit.
- [nowIndicator](nowIndicator.md) - Whether or not to display a marker indicating the current time.
- [scrollTime](scrollTime.md) - Determines how far forward the scroll pane is initially scrolled.

## Demos

- [timeGridWeek and timeGridDay views](timegrid-standard-view-demo)
- [Custom 4-day TimeGrid view](timegrid-custom-view-demo)