# Timeline View

> FullCalendar v3 documentation, for an old release. Web version: https://legacy.fullcalendar.io/v3/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 initialied like so:

```js
$('#calendar').fullCalendar({
  defaultView: 'timelineDay'
});
```

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

```js
$('#calendar').fullCalendar({
  header: {
    center: 'month,timelineFourDays'
  },
  views: {
    timelineFourDays: {
      type: 'timeline',
      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/v3/localization.md), [date/time display options](https://legacy.fullcalendar.io/v3/date-display.md), and [resource display options](https://legacy.fullcalendar.io/v3/resource-display.md).

## Timeline-specific Options

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

## See Also

- [dayClick](https://legacy.fullcalendar.io/v3/dayClick.md) - Triggered when the user clicks on a date or a time.
- [slotDuration](https://legacy.fullcalendar.io/v3/slotDuration.md) - The frequency for displaying time slots.
- [slotLabelFormat](https://legacy.fullcalendar.io/v3/slotLabelFormat.md) - Determines the text that will be displayed within a time slot.
- [slotLabelInterval](https://legacy.fullcalendar.io/v3/slotLabelInterval.md) - The frequency that the time slots should be labeled with text.
- [minTime](https://legacy.fullcalendar.io/v3/minTime.md) - Determines the first time slot that will be displayed for each day.
- [maxTime](https://legacy.fullcalendar.io/v3/maxTime.md) - Determines the last time slot that will be displayed for each day. Specified as an exclusive end time.
- [nowIndicator](https://legacy.fullcalendar.io/v3/nowIndicator.md) - Whether or not to display a marker indicating the current time.
- [scrollTime](https://legacy.fullcalendar.io/v3/scrollTime.md) - Determines how far forward the scroll pane is initially scrolled.
- [eventDrop](https://legacy.fullcalendar.io/v3/eventDrop.md) - Triggered when dragging stops and the event has moved to a different day/time.
- [eventReceive](https://legacy.fullcalendar.io/v3/eventReceive.md) - Called when a valid external jQuery UI draggable, containing event data, has been dropped onto the calendar.

## Demos

- [timelineDay, timelineWeek, timelineMonth views](https://legacy.fullcalendar.io/v3/timeline-standard-view-demo)
- [Custom-duration timeline views](https://legacy.fullcalendar.io/v3/timeline-custom-view-demo)
- [Timeline view resource grouping](https://legacy.fullcalendar.io/v3/timeline-resourceGroupField-demo)
- [Timeline view with custom columns](https://legacy.fullcalendar.io/v3/resourceColumns-demo)
- [Timeline view with column grouping](https://legacy.fullcalendar.io/v3/resourceColumns-grouping-demo)
- [Using resourceRender with a popover in timeline-view](https://legacy.fullcalendar.io/v3/timeline-resourceRender-demo)