---
title: Vertical Resource View
title_for_landing: Vertical Resource
is_premium: true
children:
  - datesAboveResources
  - resource-daygrid-view
demos:
  - vertical-resource-standard-demo
  - vertical-resource-custom-demo
  - datesAboveResources-demo
  - vertical-resource-render-hook-demo
---

<script>
  import { variables } from '../../src/lib/utils/variable-injection.js';
  const { site } = variables
</script>

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

```
npm install --save fullcalendar-scheduler@{latestReleases.npmTag}
```

(Or a packages like `@fullcalendar/react-scheduler` for [React](react#fullcalendar-premium), [Vue](vue#fullcalendar-premium), and [Angular](angular#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):

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

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