Client-Side PNG Export

DayPilot Scheduler can be exported to a PNG image using the client-side API.

JavaScript

You can export the Scheduler to PNG using exportAs() method:

dp.exportAs("png", {area: "viewport"}).download("scheduler.png");

To export the Scheduler to PNG use "png" as the first parameter:

var ex = dp.exportAs("png");

You can use the options parameter specify additional export properties, such as the exported area:

var ex = dp.exportAs("png", { area: "full" });

The exportAs() method returns a DayPilot.Export object that you can use to download the image, open the print dialog or convert it to Blob or data URI.

Open a print dialog:

dp.exportAs("png").print();

Download the image:

dp.exportAs("png").download("image.png");

Get the image as a data URI:

var dataUri = dp.exportAs("png").toDataUri();

Example

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

<div class="space">
    Area:
    <select id="area">
        <option value="viewport">Viewport</option>
        <option value="full">Full</option>
    </select>

</div>
<div class="space">
    <a href="#" id="export-button">Export</a>
    <a href="#" id="download-button">Download</a>
</div>

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

<script type="text/javascript">

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

    dp.init();
    
    $(document).ready(function() {
        $("#export-button").click(function(ev) {
            ev.preventDefault();
            var area = $("#area").val();
            var element = dp.exportAs("png", {area: area}).toElement();
            $("#export").html('').append(element);
        });
        $("#download-button").click(function(ev) {
            ev.preventDefault();
            var area = $("#area").val();
            dp.exportAs("png", {area: area}).download();
        });
    });


</script>

Demo

• JavaScript Scheduler PNG Export Demo

API: onBeforeEventExport.

The framework examples download schedule.png from the current view. onBeforeEventExport supplies plain event text; extend it when custom event content needs an export equivalent.

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()">Download PNG</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"}],
    onBeforeEventExport: args => { args.text = args.e.text(); }
  };
  async action0() {
    const dp = this.scheduler.control;
    dp.exportAs("png").download("schedule.png");
  }
}

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("png").download("schedule.png");
  }
  return <div>
    <button onClick={action0}>Download PNG</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"}]}
      onBeforeEventExport={args => { args.text = args.e.text(); }}
    />
  </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"}];
const onBeforeEventExport = args => { args.text = args.e.text(); };
async function action0() {
  const dp = scheduler.value.control;
  dp.exportAs("png").download("schedule.png");
}
</script>

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