# Vertical Resource View

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

Premium feature.

The [Scheduler add-on](https://fullcalendar.io/pricing) provides [TimeGrid view](https://legacy.fullcalendar.io/v4/timegrid-view.md) and [DayGrid view](https://legacy.fullcalendar.io/v4/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/v4/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 ],
  defaultView: 'resourceTimeGridDay',
  resources: [
    // your list of resources
  ]
});
...
```

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/timegrid/main.css' rel='stylesheet' />
```

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

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

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

[DayGrid requires a similar setup &raquo;](https://legacy.fullcalendar.io/v4/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/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).

## Articles

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

## Demos

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