# Resource DayGrid View

Premium feature.

A [DayGrid view](daygrid-view.md) like `dayGridDay` can be given resource functionality. It is 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/core';
import resourceDayGridPlugin from 'fullcalendar-scheduler/resource-daygrid';
...
let calendar = new Calendar(calendarEl, {
  plugins: [ resourceDayGridPlugin ],
  initialView: 'resourceDayGridDay',
  resources: [
    // your list of resources
  ]
});
...
```

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