---
title: "JQuery Scheduler Print and PDF Export Example | Mobiscroll"
component: "Scheduler"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/scheduler/printing-the-view"
---

# Print and PDF Export - jQuery Scheduler demo

Add print support to the JQuery Scheduler — use the print add-on to print the scheduler view or export to PDF via the browser print dialog.

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

## Description

The scheduler 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 scheduler. In addition to that, you can call the `print` method on the instance which grabs only the markup of the scheduler, 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 scheduler 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 desktop weekly scheduler layout with a fixed week strip at the top, a fixed all-day row below it, and a scrollable scheduler time grid for the selected week.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Week view** The fixed strip below the header displays the days of the selected week, with the current date highlighted by a blue circle.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected week.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event highlights the selected event.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.
- **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 scheduler** Creating printable scheduler that can be shared or posted.
- **Schedules and planning** Preparing printed schedules, planning overviews, and event-based scheduler for review or distribution.
- **Archiving and reporting** Printing or exporting scheduler views for record-keeping, handouts, or browser-based PDF generation.

## Tutorial

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

```js
var inst = $('#myscheduler').mobiscroll().eventcalendar({
    modules: [mobiscroll.print],
    view: {
        scheduler: {
            type: 'week'
        }
    }
}).mobiscroll('getInst');
                                     
$('#print-button').on('click', function () {
    inst.print();
});
```

## API used in this demo

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

## Code

### JS

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

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

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

  $('#print-button').on('click', function () {
    inst.print();
  });
});
```

### HTML

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

## Implementation notes

- Import `print` from `@mobiscroll/print` and pass it to the `modules` option as an array; JS/jQuery: assign `mobiscroll.print = print` first, then pass `modules: [mobiscroll.print]`. The print add-on is a separate package, not included in the trial.
- Use `view: { scheduler: { type: 'week' } }`. JS uses `type: 'day'` instead.
- Load events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP using `getJson(url, callback, 'jsonp')`. For the imperative API, call `inst.setEvents(events)` in the callback. jQuery: use `$.getJSON('https://trial.mobiscroll.com/events/?vers=5&callback=?', callback)`. Vue: loads from `https://trial.mobiscroll.com/work-events/` instead.
- Calling `inst.print()` extracts only the calendar markup, places it in a temporary page, and triggers the browser's print dialog. The same dialog supports PDF export.

## 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/jquery/getting-started/installation

## Related demos

- Previous: [Custom Column Widths](https://demo.mobiscroll.com/jquery/scheduler/customize-scheduler-column-width.md) - Control column widths in a JQuery Scheduler — set fixed or dynamic widths for resource columns or day columns to fit your layout.