---
title: Optimizing for Print
layout: docs-sublanding
is_premium: true
images:
  - filename: timeline-print.png
    caption: Print optimization in Timeline view
    url: timeline-standard-view-demo
  - filename: daygrid-print.png
    caption: Print optimization in DayGrid view
  - filename: timegrid-print.png
    caption: Print optimization in TimeGrid view
---

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](/pricing):

```
npm install --save @fullcalendar/adaptive
```

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

```js
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](initialize-globals), which automatically includes the adaptive plugin.

After installing the plugin, print optimization will work automatically!


## Hiding Toolbar Buttons

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

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

CSS:

```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](timegrid-view) is especially problematic. Thus a new setting has been exposed called `eventPrintLayout`:

```js
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'
```