Resource DayGrid View

A DayGrid view like dayGridDay can be given resource functionality. It is initialized in an ES6 setup like so:

npm install --save @fullcalendar/core @fullcalendar/resource-daygrid

import { Calendar } from '@fullcalendar/core';
import resourceDayGridPlugin from '@fullcalendar/resource-daygrid';
...
let calendar = new Calendar(calendarEl, {
  plugins: [ resourceDayGridPlugin ],
  defaultView: 'resourceDayGridDay',
  resources: [
    // your list of resources
  ]
});
...

Then you’ll need to ensure the correct stylesheets are loaded:

<link href='node_modules/@fullcalendar/core/main.css' rel='stylesheet' />
<link href='node_modules/@fullcalendar/daygrid/main.css' rel='stylesheet' />

Or you can choose to initialized it entirely with script tags:

<link href='fullcalendar/core/main.css' rel='stylesheet' />
<link href='fullcalendar/daygrid/main.css' rel='stylesheet' />

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