# Vertical Resource View

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

Premium feature.

[FullCalendar Premium](https://fullcalendar.io/pricing) provides [TimeGrid view](https://legacy.fullcalendar.io/v5/timegrid-view.md) and [DayGrid view](https://legacy.fullcalendar.io/v5/daygrid-view.md) with the ability to display **resources as columns**. For example, a TimeGrid `day` resource view can be initialized in an [ES6 setup](https://legacy.fullcalendar.io/v5/initialize-es6.md) like so:

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

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

Or, you can choose to initialize it 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: 'resourceTimeGridDay',
  resources: [
    // your list of resources
  ]
});
...
</script>
```

[DayGrid requires a similar setup &raquo;](https://legacy.fullcalendar.io/v5/resource-daygrid-view.md)

The following options are specific to Vertical Resource view. However, there are numerous other options throughout the docs that affect the display of Vertical Resource 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).

## Articles

- [datesAboveResources](https://legacy.fullcalendar.io/v5/datesAboveResources.md) - Determines if resourceTimeGrid or resourceDayGrid views should render their date headings above their resource headings.
- [Resource DayGrid View](https://legacy.fullcalendar.io/v5/resource-daygrid-view.md) - A DayGrid view like dayGridDay can be given resource functionality.

## Demos

- [1-day vertical resource view](https://legacy.fullcalendar.io/v5/vertical-resource-standard-demo)
- [Custom 4-day vertical resource view](https://legacy.fullcalendar.io/v5/vertical-resource-custom-demo)
- [Vertical resource view with datesAboveResources](https://legacy.fullcalendar.io/v5/datesAboveResources-demo)
- [Using resourceLabelDidMount with a popover in vertical-resource-view](https://legacy.fullcalendar.io/v5/vertical-resource-render-hook-demo)