---
title: Timeline View
title_for_landing: Timeline
is_premium: true
children:
  - title: Timeline-specific Options
    children:
      - resourceGroupField
      - resourceAreaWidth
      - resourceColumns
      - resourcesInitiallyExpanded
      - slotMinWidth
      - eventMinWidth
      - timeline-view-no-resources
  - article: resource-column-header-render-hooks
    points:
      - resourceColumnHeaderClass
      - resourceColumnHeaderInnerClass
      - resourceColumnHeaderContent
      - resourceColumnHeaderDidMount
      - resourceColumnHeaderWillUnmount
  - article: resource-column-divider-render-hooks
    points:
      - resourceColumnDividerClass
  - article: resource-header-row-render-hooks
    points:
      - resourceHeaderRowClass
  - article: resource-row-render-hooks
    points:
      - resourceRowClass
  - article: resource-cell-render-hooks
    points:
      - resourceCellClass
      - resourceCellContent
      - resourceCellDidMount
      - resourceCellWillUnmount
  - article: resource-expander-render-hooks
    points:
      - resourceIndentClass
      - resourceExpanderClass
  - article: resource-lane-render-hooks
    points:
      - resourceLaneClass
      - resourceLaneTopClassNames
      - resourceLaneBottomClassNames
      - resourceLaneTopContent
      - resourceLaneBottomContent
      - resourceLaneDidMount
      - resourceLaneWillUnmount
  - article: resource-group-header-render-hooks
    points:
      - resourceGroupHeaderClass
      - resourceGroupHeaderInnerClass
      - resourceGroupHeaderContent
      - resourceGroupHeaderDidMount
      - resourceGroupHeaderWillUnmount
  - article: resource-group-lane-render-hooks
    points:
      - resourceGroupLaneClass
      - resourceGroupLaneInnerClass
      - resourceGroupLaneContent
      - resourceGroupLaneDidMount
      - resourceGroupLaneWillUnmount
  - article: timeline-render-hooks
    points:
      - timelineTopClass
      - timelineBottomClass
related:
  - eventMaxStack
  - dateClick
  - slotDuration
  - slotLabelFormat
  - slotLabelInterval
  - slotMinTime
  - slotMaxTime
  - slot-header-render-hooks
  - slot-lane-render-hooks
  - expandRows
  - nowIndicator
  - scrollTime
  - eventDrop
  - eventReceive
demos:
  - timeline-standard-view-demo
  - timeline-custom-view-demo
  - timeline-resourceGroupField-demo
  - resourceColumns-demo
  - resourceColumns-grouping-demo
  - timeline-resource-render-hook-demo
---

[FullCalendar Premium](/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](initialize-es6) like so:

```
npm install --save fullcalendar-scheduler
```

```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):

```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) 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), [date/time display options](date-display), and [resource display options](resource-display).