# Timeline View

Premium feature.

<script>
  import { pricingUrl } from '$docs-config';
</script>

[FullCalendar Premium]({pricingUrl}) 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](initialize-es6.md) like so:

```
npm install --save fullcalendar-scheduler@{npmTag}
```

(Or a packages like `@fullcalendar/react-scheduler` for [React](react.md#fullcalendar-premium), [Vue](vue.md#fullcalendar-premium), and [Angular](angular.md#fullcalendar-premium))

```js
import { Calendar } from 'fullcalendar';
import resourceTimelinePlugin from 'fullcalendar-scheduler/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](initialize-globals.md):

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

If you need a different duration, make a [custom view](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](localization.md), [date/time display options](date-display.md), and [resource display options](resource-display.md).

## Articles

- [Resource Column Header Render Hooks](resource-column-header-render-hooks.md) - The "resource column header" is above the resource data and displays the text "Resources" by default.
- [Resource Column Divider Render Hooks](resource-column-divider-render-hooks.md) - Customize the divider line between the resource datagrid area and the timeline area.
- [Resource Header Row Render Hooks](resource-header-row-render-hooks.md) - Customize the header rows of the resource datagrid area in Timeline view.
- [Resource Row Render Hooks](resource-row-render-hooks.md) - Customize the body rows of the resource datagrid area in Timeline view. Does not apply to resource-group header rows within the body.
- [Resource Cell Render Hooks](resource-cell-render-hooks.md) - In Resource Timeline view, "resource cells" are the cells in the resource area on the left side of the view. Each cell corresponds to a column field (such as the resource title or a custom column from resourceColumns). These hooks also fire for resource-group cells — when info.resource is absent, the cell belongs to a group row rather than an individual resource.
- [Resource Expander Render Hooks](resource-expander-render-hooks.md) - In hierarchical Resource Timeline view, customize the indent and expander elements that appear in front of each resource row.
- [Resource Lane Render Hooks](resource-lane-render-hooks.md) - A resource "lane" is an element in resource-timeline view. It runs horizontally across the timeline slots for each resource.
- [Resource Group Header Render Hooks](resource-group-header-render-hooks.md) - In resource timeline view, a resource group "header" is where a group's name is displayed, at the top of each row group.
- [Resource Group Lane Render Hooks](resource-group-lane-render-hooks.md) - In resource timeline view, a resource group "lane" is the horizontal area running along the time slots.
- [Non-Resource Timeline Render Hooks](timeline-render-hooks.md) - Customize elements specific to Timeline view without resources.

## Timeline-specific Options

- [resourceGroupField](resourceGroupField.md) - Visually groups resources by certain criteria.
- [resourceColumnsWidth](resourceColumnsWidth.md) - Determines the width of the area that contains the list of resources.
- [resourceColumns](resourceColumns.md) - Turns the resource area from a plain list of titles into a grid of data.
- [resourcesInitiallyExpanded](resourcesInitiallyExpanded.md) - Whether child resources should be expanded when the view loads.
- [slotMinWidth](slotMinWidth.md) - Determines how wide each of the time-axis slots will be. Specified as a number of pixels.
- [eventMinWidth](eventMinWidth.md) - In timeline view, the minimum width an event is allowed to be.
- [Timeline View with no Resources](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. If this is the case, you can initialize a plain timeline view in an ES6 setup like so:

## 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.
- [dateClick](dateClick.md) - Triggered when the user clicks on a date or a time.
- [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.
- [eventDrop](eventDrop.md) - Triggered when dragging stops and the event has moved to a different day/time.
- [eventReceive](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](timeline-standard-view-demo)
- [Custom-duration timeline views](timeline-custom-view-demo)
- [Timeline view resource grouping](timeline-resourceGroupField-demo)
- [Timeline view with custom columns](resourceColumns-demo)
- [Timeline view with column grouping](resourceColumns-grouping-demo)
- [Using resourceLabelDidMount with a popover in timeline-view](timeline-resource-render-hook-demo)