# Timeline View

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

Premium feature.

The [Scheduler add-on](https://fullcalendar.io/pricing) provides a new 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/v4/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 ],
  defaultView: 'resourceTimeline',
  resources: [
    // your resource list
  ]
});
...
```

Then you'll need to ensure the correct stylesheets are loaded:

```html
<link href='node_modules/@fullcalendar/core/main.css' rel='stylesheet' />
<link href='node_modules/@fullcalendar/timeline/main.css' rel='stylesheet' />
<link href='node_modules/@fullcalendar/resource-timeline/main.css' rel='stylesheet' />
```

Or you can choose to initialized the Timeline views [entirely with script tags](https://legacy.fullcalendar.io/v4/initialize-globals.md):

```html
<link href='fullcalendar/core/main.css' rel='stylesheet' />
<link href='fullcalendar/timeline/main.css' rel='stylesheet' />
<link href='fullcalendar/resource-timeline/main.css' rel='stylesheet' />

<script src='fullcalendar/core/main.js'></script>
<script src='fullcalendar/timeline/main.js'></script>
<script src='fullcalendar/resource-common/main.js'></script>
<script src='fullcalendar/resource-timeline/main.js'></script>
<script>
...
var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'resourceTimeline' ],
  defaultView: 'resourceTimelineWeek',
  resources: [
    // your resource list
  ]
});
...
</script>
```

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

```js
var calendar = new Calendar(calendarEl, {
  defaultView: '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/v4/localization.md), [date/time display options](https://legacy.fullcalendar.io/v4/date-display.md), and [resource display options](https://legacy.fullcalendar.io/v4/resource-display.md).

## Timeline-specific Options

- [resourceGroupField](https://legacy.fullcalendar.io/v4/resourceGroupField.md) - Visually groups resources by certain criteria.
- [resourceGroupText](https://legacy.fullcalendar.io/v4/resourceGroupText.md) - Determines the text that is displayed in the resource group divider.
- [resourceAreaWidth](https://legacy.fullcalendar.io/v4/resourceAreaWidth.md) - Determines the width of the area that contains the list of resources.
- [resourceLabelText](https://legacy.fullcalendar.io/v4/resourceLabelText.md) - The text that will appear above the list of resources.
- [resourceColumns](https://legacy.fullcalendar.io/v4/resourceColumns.md) - Turns the resource area from a plain list of titles into a grid of data.
- [resourcesInitiallyExpanded](https://legacy.fullcalendar.io/v4/resourcesInitiallyExpanded.md) - Whether child resources should be expanded when the view loads.
- [slotWidth](https://legacy.fullcalendar.io/v4/slotWidth.md) - Determines how wide each of the time-axis slots will be. Specified as a number of pixels.
- [Timeline View with no Resources](https://legacy.fullcalendar.io/v4/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.

## See Also

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