Timeline View Premium

Timeline view has a customizable horizontal time axis, with resources as rows. It’s part of FullCalendar Premium.

The following pre-configured timeline views are available: timelineDay, timelineWeek, timelineMonth, and timelineYear. When using a build system, initialize them like this:

npm install --save fullcalendar-scheduler

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

import { Calendar } from 'fullcalendar';
import resourceTimelinePlugin from 'fullcalendar-scheduler/resource-timeline';
...
const calendar = new Calendar(calendarEl, {
  plugins: [ resourceTimelinePlugin ],
  initialView: 'resourceTimeline',
  resources: [
    // your resource list
  ]
});
...

Or, you can choose to initialize Timeline view with the fullcalendar-scheduler global bundle:

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

If you need a different duration, make a custom view with type 'resourceTimeline':

const calendar = new Calendar(calendarEl, {
  initialView: 'resourceTimelineFourDays',
  views: {
    resourceTimelineFourDays: {
      type: 'resourceTimeline',
      duration: { days: 4 }
    }
  }
});

When creating a custom-duration view, reasonable defaults for the slot-related settings will automatically be chosen.

If you have a large number of resources or a long time axis, turn on virtual rendering so that only the visible rows and columns are rendered.

The following options are specific to Timeline view. However, there are numerous other options throughout the docs that affect the display of Timeline view, such as the locale-related options, date/time display options, and resource display options.