Client-Side Image Export

On the client side, you can export the Scheduler in one of the following formats:

• JPEG
• PNG
• SVG

The exported image can also be immediately printed (using the standard browser print dialog) after export. The printing is supported for all formats but you should use SVG for the best results.

The image rendered during the export is not created using HTML (which is used for rendering the Scheduler in the browser). That results in some limitations:

• The maximum size of JPEG and PNG images is limited by the browser (you may not be able to render Scheduler view with a long timeline using a single export).
• Custom HTML is not supported (inside events, row headers, time headers).

The Scheduler tries to read the actual CSS styles but it sometimes it will not be able to detect it. In such cases, you can adjust the appearance using the customization events (e.g. onBeforeEventExport, see below).

HTML Support

If you customize the HTML using onBefore*Render events you will see the HTML in the exported image as plain text.

At this moment, the export only supports plain text that includes line breaks. You can use the customization event handlers (see below) to supply alternative text.

Read more about HTML export support in the following tutorial:

• JavaScript Scheduler: How to Export HTML to Image

Cell Customization during Export

DayPilot.Scheduler.onBeforeCellExport lets you customize the appearance of the grid cell. The following properties are available:

• args.text
• args.horizontalAlignment
• args.backColor

Event Customization during Export

DayPilot.Scheduler.onBeforeEventExport lets you customize the following properties:

• args.text
• args.fontSize
• args.fontFamily
• args.fontStyle
• args.fontColor
• args.backColor
• args.borderColor
• args.horizontalAlignment
• args.barHeight

Example that uses custom event text during export:

dp.onBeforeEventExport = function(args) {
  args.text = args.e.text() + "\n" + args.e.start().toString("M/d/yyyy");
};

Row Header Customization during Export

You can use DayPilot.Scheduler.onBeforeRowHeaderExport to customize the following properties:

• args.text
• args.backColor
• args.fontSize
• args.fontFamily
• args.fontStyle
• args.fontColor
• args.borderColor
• args.horizontalAlignment

Time Header Customization during Export

You can use DayPilot.Scheduler.onBeforeTimeHeaderExport to customize the following properties:

• args.text
• args.backColor (since 8.3.2737)

API: onBeforeEventExport.

The framework examples download the current view as SVG. Their onBeforeEventExport callback supplies the event label as export text; adapt that callback when framework-rendered event content needs a text equivalent.

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

Angular

Keep the export callback in config. The download button uses the @ViewChild control's exportAs() method.

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 SVG</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("svg").download("schedule.svg");
  }
}

React

Supply onBeforeEventExport as a prop. The download handler calls the Scheduler API saved through controlRef.

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").download("schedule.svg");
  }
  return <div>
    <button onClick={action0}>Download SVG</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

Bind :onBeforeEventExport and use the Scheduler's template ref for the button's export call.

<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("svg").download("schedule.svg");
}
</script>

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