# Vertical Resource View

Premium feature.

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

[FullCalendar Premium]({pricingUrl}) provides [TimeGrid view](timegrid-view.md) and [DayGrid view](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](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 resourceTimeGridPlugin from 'fullcalendar-scheduler/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](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: 'resourceTimeGridDay',
  resources: [
    // your list of resources
  ]
});
...
</script>
```

[DayGrid requires a similar setup &raquo;](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](localization.md), [date/time display options](date-display.md), and [resource display options](resource-display.md).

## Articles

- [datesAboveResources](datesAboveResources.md) - Determines if resourceTimeGrid or resourceDayGrid views should render their date headings above their resource headings.
- [Resource DayGrid View](resource-daygrid-view.md) - A DayGrid view like dayGridDay can be given resource functionality. It is initialized in an ES6 setup like so:

## Demos

- [1-day vertical resource view](vertical-resource-standard-demo)
- [Custom 4-day vertical resource view](vertical-resource-custom-demo)
- [Vertical resource view with datesAboveResources](datesAboveResources-demo)
- [Using resourceLabelDidMount with a popover in vertical-resource-view](vertical-resource-render-hook-demo)