FullCalendar

Printer-Friendly Rendering Premium

Make the calendar print cleanly on paper. By default, FullCalendar doesn’t look very good in print, because a web browser isn’t able to convert certain things consistently, such as absolute positioning and scrollbars. Fortunately FullCalendar can render differently for print if you configure it to do so.

It is a premium plugin. When using a build system, initialize it like this:

npm install --save fullcalendar-scheduler

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

Then, add it to your calendar’s plugin list:

import adaptivePlugin from 'fullcalendar-scheduler/adaptive'

const calendar = new Calendar({
  // ...other settings...
  plugins: [
    // ...other plugins...
    adaptivePlugin
  ]
})

OR, you can use the fullcalendar-scheduler pre-built bundle, which automatically includes the adaptive plugin.

After installing the plugin, printer-friendly rendering will work automatically!

Hiding Toolbar Buttons#

By default, toolbar buttons are displayed in print view. You can hide them using this technique:

new Calendar(calendarEl, {
  headerToolbar: {
    start: 'prev,next'
    center: 'title',
    end: 'dayGridMonth,timeGridWeek,timeGridDay',
  },
  buttonClass: 'print-hidden',
  buttonGroupClass: 'print-hidden',
})

CSS:

@media print {
  .print-hidden {
    display: none;
  }
}

Or in Tailwind, use the print:hidden className.

TimeGrid Print View#

Browsers, especially Firefox, have a tough time displaying absolutely-positioned elements across pages, which makes TimeGrid view especially problematic for print. Use the eventPrintLayout setting to control this behavior.

Limiting Rows#

When a Timeline view has a very large number of resources, printing every row can overwhelm the browser, since printed output doesn’t use virtual rendering. Use the printMaxRows setting to cap how many rows are included in the printed output.