---
title: "Javascript Event calendar Printing & PDF Export Example | Mobiscroll"
component: "Event calendar"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/eventcalendar/printing-the-view"
---

# Printing & PDF Export - JavaScript Event calendar demo

Print only the calendar view — not the full page — or export it to PDF with the Javascript event calendar print add-on. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/eventcalendar/printing-the-view)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/calendar-view/printing-the-view)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/eventcalendar/printing-the-view.md), [Angular](https://demo.mobiscroll.com/angular/eventcalendar/printing-the-view.md), [React](https://demo.mobiscroll.com/react/eventcalendar/printing-the-view.md), [Vue](https://demo.mobiscroll.com/vue/eventcalendar/printing-the-view.md)

## Description

The event calendar includes print optimized styling through the print add-on. This needs to be added to the download package or installed separately from a dedicated NPM package.

Print styling is applied when someone prints the page that contains the calendar. In addition to that, you can call the `print` method on the instance which grabs only the markup of the calendar, places it onto a temporary page and calls the browsers printing function. This is especially useful when you want to add a button to only print the calendar rather than the whole page.

Besides printing, PDF export is possible through the print dialog of the browser.

The **print module** is not available in the trial. You can try the live demo to see how it looks.

## What this demo shows

- A full month event calendar with multiple color-coded event labels rendered directly inside the day cells and the standard header controls for month and year navigation, previous and next arrows, and a Today button.
- **Overflow and more events** The number of visible labels per day depends on the available space in the cell. Events that do not fit are moved into a popover, and the cell shows an `X more` label where `X` is the number of hidden events. Clicking the `X more` label opens a popup that shows the additional events for that day.
- **Event selection** Clicking or hovering over an event label highlights the selected event and the day number in the top-right corner with a blue background.
- **Cell hover state** Hovering over a day cell highlights the day number in the top-right corner with a gray background.
- **Day selection** Clicking the empty area of a day cell selects the day and highlights the day number in the top-right corner with a blue background.
- **Month navigation** The calendar supports changing months by clicking and dragging the view left or right.
- **Printing** A `Print the calendar` button is displayed next to the month view on the left side and opens the browser print dialog, applying print styling so the calendar can be printed or exported to PDF.

## Best for

- **Printable calendars** Creating printable event calendars that can be shared or posted.
- **Schedules and planning** Preparing printed schedules, planning overviews, and event-based calendars for review or distribution.
- **Archiving and reporting** Printing or exporting calendar views for record-keeping, handouts, or browser-based PDF generation.

## Tutorial

By calling the `print` method, the calendar will open a new window and print its content.

```js
var inst = mobiscroll.eventcalendar('#mycalendar', {
    modules: [mobiscroll.print]
});
                                     
document.getElementById('print-button')
    .addEventListener('click', function () {
        inst.print();
    });
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`clickToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-eventDelete) - option
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

var inst = mobiscroll.eventcalendar('#demo-printing-the-view', {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  modules: [mobiscroll.print],
});

mobiscroll.getJson(
  'https://trial.mobiscroll.com/events/?vers=5',
  function (events) {
    inst.setEvents(events);
  },
  'jsonp',
);

document.getElementById('print-button').addEventListener('click', function () {
  inst.print();
});
```

### HTML

```html
<button id="print-button" mbsc-button>Print calendar</button>
<div id="demo-printing-the-view"></div>
```

## Implementation notes

- Install `@mobiscroll/print` as a separate npm package (not included in the trial). Import `print` from it and pass it to the `modules` prop on the `Eventcalendar` component.
- Capture the calendar instance via a ref (Angular: use `@ViewChild`) and call `inst.print()`.
- Calling `inst.print()` extracts the calendar markup into a temporary page and calls the browser's print function - only the calendar is printed, not the surrounding page.
- Load events from a remote endpoint using `getJson` and assign them to `data`; for the imperative API, call `inst.setEvents(events)` in the callback.
- PDF export requires no extra configuration - users can choose "Save as PDF" from the browser's print dialog.

## Run it in your project

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Previous: [Responsive Month View](https://demo.mobiscroll.com/javascript/eventcalendar/responsive-month-view.md) - Build a responsive Javascript event calendar — switch from week + agenda on mobile to a full month view on desktop using configurable breakpoints.