Vertical Resource View Premium

Vertical resource view displays resources as columns in TimeGrid view and DayGrid view. It’s part of FullCalendar Premium. For example, when using a build system, initialize a TimeGrid day resource view like this:

npm install --save fullcalendar-scheduler

(Or a packages like @fullcalendar/react-scheduler for React, Vue, and Angular)

import { Calendar } from 'fullcalendar';
import resourceTimeGridPlugin from 'fullcalendar-scheduler/resource-timegrid';
...
const 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:

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.3/all/global.js'></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@7.1.3/all/global.js'></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.3/themes/monarch/global.js'></script>
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.3/skeleton.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.3/themes/monarch/theme.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.3/themes/monarch/palettes/purple.css' rel='stylesheet' />
<script>
...
const calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'resourceTimeGridDay',
  resources: [
    // your list of resources
  ]
});
...
</script>

DayGrid requires a similar setup →

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