Client-Side PDF Export

With the help of the open-source jsPDF library, the Scheduler can be exported to a PDF document on the client side.

Printing through PDF Export

The PDF export is especially useful when printing the Scheduler. The Scheduler supports direct printing of the exported image (JPEG, PNG, SVG) using the built-in print dialog but that has limitations. Printing the PDF gives you more control over the output:

• add custom headers, footers and additional content
• control the paper size and orientation
• split the output to multiple pages (by resources or time)

Unfortunately, there is no way to invoke the print dialog automatically during PDF export.

How to Export the Scheduler to PDF

In order to export the Scheduler to PDF, you need to create a new PDF document using jsPDF and insert the Scheduler, exported as JPEG image.

In order to improve the image quality (especially for printing), it's a good idea to use an image scale higher than 1:1 pixels. The following example uses scale:2 (200% magnification).

var dp = new DayPilot.Scheduler("dp");
// ...
dp.init();



function createPdfAsBlob() {

  var doc = new jsPDF("landscape", "mm", "a4");
  doc.setFontSize(40);
  doc.text("Scheduler", 35, 25);

  var image = dp.exportAs("jpeg", {
        area: "viewport",
        scale: 2,
        quality: 0.95
  });
  var dimensions = image.dimensions();
  var ratio = dimensions.width / dimensions.height;
  var width = 280;
  var height = width/ratio;
  doc.addImage(image.toDataUri(), 'JPEG', 10, 40, width, height);

  return doc.output("blob");
}

Tutorials

• Exporting JavaScript Scheduler to PDF, paged by resources (vertically)
• Exporting JavaScript Scheduler to PDF, page by time (horizontally)

API: exportAs.

Install jspdf for these examples. Each download button embeds a PNG export in an A4 landscape PDF, fits it inside the page margins and preserves its aspect ratio. The earlier JavaScript example demonstrates the JPEG alternative.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

Import jsPDF in the component file. The button method reads the Scheduler control through @ViewChild before creating the PDF.

import {Component, ViewChild} from "@angular/core";
import {DayPilot, DayPilotModule, DayPilotSchedulerComponent} from "daypilot-pro-angular";
import {jsPDF} from "jspdf";
@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <button (click)="action0()">Download PDF</button>
    <daypilot-scheduler [config]="config" #scheduler></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent;
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]
  };
  async action0() {
    const dp = this.scheduler.control;
    const image = dp.exportAs("png");
    const size = image.dimensions();
    const pdf = new jsPDF({orientation: "landscape", unit: "mm", format: "a4"});
    const ratio = Math.min(277 / size.width, 170 / size.height);
    pdf.text("Schedule", 10, 15);
    pdf.addImage(image.toDataUri(), "PNG", 10, 25, size.width * ratio, size.height * ratio);
    pdf.save("schedule.pdf");
  }
}

React

The download handler reads the Scheduler from the ref populated by controlRef, then builds the document using the imported jsPDF class.

import React, {useRef} from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";
import {jsPDF} from "jspdf";
export default function SchedulerExample() {
  const scheduler = useRef(null);
  async function action0() {
    const dp = scheduler.current;
    const image = dp.exportAs("png");
    const size = image.dimensions();
    const pdf = new jsPDF({orientation: "landscape", unit: "mm", format: "a4"});
    const ratio = Math.min(277 / size.width, 170 / size.height);
    pdf.text("Schedule", 10, 15);
    pdf.addImage(image.toDataUri(), "PNG", 10, 25, size.width * ratio, size.height * ratio);
    pdf.save("schedule.pdf");
  }
  return <div>
    <button onClick={action0}>Download PDF</button>
    <DayPilotScheduler
      controlRef={control => { scheduler.current = control; }}
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
    />
  </div>;
}

Vue

Import jsPDF in <script setup>. The @click function exports through scheduler.value.control and saves the PDF.

<script setup>
import {ref} from "vue";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";
import {jsPDF} from "jspdf";
const scheduler = ref(null);
const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
async function action0() {
  const dp = scheduler.value.control;
  const image = dp.exportAs("png");
  const size = image.dimensions();
  const pdf = new jsPDF({orientation: "landscape", unit: "mm", format: "a4"});
  const ratio = Math.min(277 / size.width, 170 / size.height);
  pdf.text("Schedule", 10, 15);
  pdf.addImage(image.toDataUri(), "PNG", 10, 25, size.width * ratio, size.height * ratio);
  pdf.save("schedule.pdf");
}
</script>

<template>
  <div>
    <button @click="action0">Download PDF</button>
    <DayPilotScheduler ref="scheduler"
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
    />
  </div>
</template>