FullCalendar looks great on a computer screen, but by default it does not look very good for printing on a piece of paper. 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.

You will need to install @fullcalendar/adaptive, which is a premium plugin:

npm install --save @fullcalendar/adaptive

And then add it to your calendar’s plugin list:

import adaptivePlugin from '@fullcalendar/adaptive'

let 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, print optimization will work automatically!

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 is why TimeGrid view is especially problematic. Thus a new setting has been exposed called eventPrintLayout:

eventPrintLayout: 'stack' // force a simple list of events, forgoing coordinates
eventPrintLayout: 'grid' // force normal rendering, just like a compute screen
eventPrintLayout: 'auto' // if Firefox, do 'stack', otherwise do 'grid'

Docs Optimizing for Print

Hiding Toolbar Buttons

TimeGrid Print View