Client-Side JPEG Export

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

Note that JPEG is not the optimal export format. The nature of the exported image (rectangular shapes, blocks of uniform colors) makes it work much better with PNG. The same image exported as PNG usually has about 50% smaller size and better image quality (PNG uses lossless compression).

However, the JPEG format can be used when exporting the Scheduler to PDF. Including JPEG in the PDF document will reduce the output size. If you insert a PNG it will be expanded to a raw bitmap.

JavaScript

You can export the Scheduler using exportAs() method:

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

The optional options parameter lets you specify the Scheduler area to be included in the exported JPEG image (area), magnification (scale) and JPEG quality (quality).

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("jpeg", {area: area}).toElement();
            $("#export").html('').append(element);
        });
        $("#download-button").click(function(ev) {
            ev.preventDefault();
            var area = $("#area").val();
            dp.exportAs("jpeg", {area: area}).download();
        });
    });


</script>

Demo

• JavaScript Scheduler: JPEG Image Export Demo

API: onBeforeEventExport.

The examples download the current view as schedule.jpeg. They supply event text through onBeforeEventExport; custom DOM or framework content needs an equivalent export representation.

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

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

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