Scheduler Printing

The Scheduler supports direct client-side printing of the exported image. 

• It opens the exported image in a hidden iframe and invokes the browser print dialog.

• JPEG, PNG and SVG image format printing is supported. Use SVG (vector format) for smooth scaling.

• You can specify the area to be printed using the options.area property when calling the exportAs() method.

JavaScript

Printing the current viewport:

<div id="dp"></div>

<div class="space">
    Format:
    <select id="format">
        <option value="svg">SVG</option>
        <option value="png">PNG</option>
    </select>

</div>
<div class="space">
    <a href="#" id="print-button">Print</a>
</div>

<div id="export"></div>

<script type="text/javascript">

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

    dp.init();
    
    $(document).ready(function() {
        $("#print-button").click(function(ev) {
            ev.preventDefault();
            var format = $("#format").val();
            dp.exportAs(format).print();
        });
    });

</script>

Printing the full Scheduler:

<div id="dp"></div>

<div class="space">
    Format:
    <select id="format">
        <option value="svg">SVG</option>
        <option value="png">PNG</option>
    </select>

</div>
<div class="space">
    <a href="#" id="print-button">Print</a>
</div>

<div id="export"></div>

<script type="text/javascript">

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

    dp.init();
    
    $(document).ready(function() {
        $("#print-button").click(function(ev) {
            ev.preventDefault();
            var format = $("#format").val();
            dp.exportAs(format, { area: "full" } ).print();
        });
    });

</script>

Demo

• http://javascript.daypilot.org/demo/scheduler/exportprint.html

API: exportAs.

The Print schedule buttons export the current view as SVG and open the browser print dialog with print().

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

Angular

import {Component, ViewChild} from "@angular/core";
import {DayPilot, DayPilotModule, DayPilotSchedulerComponent} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <button (click)="action0()">Print schedule</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;
    dp.exportAs("svg").print();
  }
}

React

import React, {useRef} from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {
  const scheduler = useRef(null);
  async function action0() {
    const dp = scheduler.current;
    dp.exportAs("svg").print();
  }
  return <div>
    <button onClick={action0}>Print schedule</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

<script setup>
import {ref} from "vue";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

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;
  dp.exportAs("svg").print();
}
</script>

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