# Timeline View

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

Premium feature.

[FullCalendar Premium](https://fullcalendar.io/pricing) provides a view called "timeline view" with a customizable horizontal time-axis and resources as rows.

The following pre-configured timeline views are available: **timelineDay**, **timelineWeek**, **timelineMonth**, and **timelineYear**. They can be initialized in an [ES6 setup](https://legacy.fullcalendar.io/v5/initialize-es6.md) like so:

```
npm install --save @fullcalendar/core @fullcalendar/resource-timeline
```

```js
import { Calendar } from '@fullcalendar/core';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
...
let calendar = new Calendar(calendarEl, {
  plugins: [ resourceTimelinePlugin ],
  initialView: 'resourceTimeline',
  resources: [
    // your resource list
  ]
});
...
```

Or, you can choose to initialize Timeline view with the `fullcalendar-scheduler` [global bundle](https://legacy.fullcalendar.io/v5/initialize-globals.md):

```html
<link href='fullcalendar-scheduler/main.css' rel='stylesheet' />
<script src='fullcalendar-scheduler/main.js'></script>
<script>
...
var calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'resourceTimelineWeek',
  resources: [
    // your resource list
  ]
});
...
</script>
```

If you need a different duration, make a [custom view](https://legacy.fullcalendar.io/v5/custom-view-with-settings.md) with type `'resourceTimeline'`:

```js
var calendar = new Calendar(calendarEl, {
  initialView: 'resourceTimelineFourDays',
  views: {
    resourceTimelineFourDays: {
      type: 'resourceTimeline',
      duration: { days: 4 }
    }
  }
});
```

When creating a custom-duration view, reasonable defaults for the slot-related settings will automatically be chosen.

The following options are specific to Timeline view. However, there are numerous other options throughout the docs that affect the display of Timeline view, such as the [locale-related options](https://legacy.fullcalendar.io/v5/localization.md), [date/time display options](https://legacy.fullcalendar.io/v5/date-display.md), and [resource display options](https://legacy.fullcalendar.io/v5/resource-display.md).

## Timeline-specific Options

- [resourceGroupField](https://legacy.fullcalendar.io/v5/resourceGroupField.md) - Visually groups resources by certain criteria.
- [resourceAreaWidth](https://legacy.fullcalendar.io/v5/resourceAreaWidth.md) - Determines the width of the area that contains the list of resources.
- [resourceAreaColumns](https://legacy.fullcalendar.io/v5/resourceAreaColumns.md) - Turns the resource area from a plain list of titles into a grid of data.
- [resourcesInitiallyExpanded](https://legacy.fullcalendar.io/v5/resourcesInitiallyExpanded.md) - Whether child resources should be expanded when the view loads.
- [slotMinWidth](https://legacy.fullcalendar.io/v5/slotMinWidth.md) - Determines how wide each of the time-axis slots will be. Specified as a number of pixels.
- [eventMinWidth](https://legacy.fullcalendar.io/v5/eventMinWidth.md) - In timeline view, the minimum width an event is allowed to be.
- [Timeline View with no Resources](https://legacy.fullcalendar.io/v5/timeline-view-no-resources.md) - You might like the way the time axis operates in Timeline view, but you simply don’t want to display resource rows.
- [Resource Group Render Hooks](https://legacy.fullcalendar.io/v5/resource-group-render-hooks.md) - Label Hooks
- [Resource-Area Header Render Hooks](https://legacy.fullcalendar.io/v5/resource-area-header-render-hooks.md) - The “resource-area header” is above the resource data and displays the text “Resources” by default.

## See Also

- [eventMaxStack](https://legacy.fullcalendar.io/v5/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.
- [Resource Render Hooks](https://legacy.fullcalendar.io/v5/resource-render-hooks.md) - Label Hooks
- [dateClick](https://legacy.fullcalendar.io/v5/dateClick.md) - Triggered when the user clicks on a date or a time.
- [slotDuration](https://legacy.fullcalendar.io/v5/slotDuration.md) - The frequency for displaying time slots.
- [slotLabelFormat](https://legacy.fullcalendar.io/v5/slotLabelFormat.md) - Determines the text that will be displayed within a time slot.
- [slotLabelInterval](https://legacy.fullcalendar.io/v5/slotLabelInterval.md) - The frequency that the time slots should be labeled with text.
- [slotMinTime](https://legacy.fullcalendar.io/v5/slotMinTime.md) - Determines the first time slot that will be displayed for each day.
- [slotMaxTime](https://legacy.fullcalendar.io/v5/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/v5/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/v5/nowIndicator.md) - Whether or not to display a marker indicating the current time.
- [scrollTime](https://legacy.fullcalendar.io/v5/scrollTime.md) - Determines how far forward the scroll pane is initially scrolled.
- [eventDrop](https://legacy.fullcalendar.io/v5/eventDrop.md) - Triggered when dragging stops and the event has moved to a different day/time.
- [eventReceive](https://legacy.fullcalendar.io/v5/eventReceive.md) - Called when an external draggable element with associated event data was dropped onto the calendar. Or an event from another calendar.

## Demos

- [Various Resource-Timeline Views](https://legacy.fullcalendar.io/v5/timeline-standard-view-demo)
- [Custom-duration timeline views](https://legacy.fullcalendar.io/v5/timeline-custom-view-demo)
- [Timeline view resource grouping](https://legacy.fullcalendar.io/v5/timeline-resourceGroupField-demo)
- [Timeline view with custom columns](https://legacy.fullcalendar.io/v5/resourceAreaColumns-demo)
- [Timeline view with column grouping](https://legacy.fullcalendar.io/v5/resourceAreaColumns-grouping-demo)
- [Using resourceLabelDidMount with a popover in timeline-view](https://legacy.fullcalendar.io/v5/timeline-resource-render-hook-demo)