DayPilot.Calendar.exportAs

The exportAs() method exports the JavaScript Calendar component in the specified format and returns a DayPilot.Export helper.

Declaration

DayPilot.Calendar.exportAs(format[, options]);

Parameters

• format ("svg" | "png" | "jpeg" | "xlsx") - export format

• options.area ("viewport" | "full") - exported area; if not specified, "viewport" is used

Image export options:

• options.quality (number) - output JPEG quality; applies only when format is "jpeg"; if not specified, 0.92 is used

• options.scale (number) - output scale; if not specified, 1 is used; use 2 to magnify the output to 200%

Excel export options:

• options.mime (string) - custom MIME type for the exported file; the default is "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"

• options.transformWidth (function) - converts a pixel value to Excel column width units; the default is (width) => (width - 5) / 7

• options.transformHeight (function) - converts a pixel value to Excel row height units; the default is (height) => height * 0.75

Excel export is available since 2026.1.6816. It only supports full grid export, so the options.area value is ignored.

Return Value

Returns a DayPilot.Export object.

For image export, the object provides the following methods:

• toElement() - returns a DOM element with the image (<svg> or <img>)

• toHtml() - returns the DOM element as HTML

• toDataUri() - returns a data URI string with SVG or image data

• toBlob() - returns a Blob object

• download(filename) - forces download of the exported image

• print() - prints the exported image using the browser print dialog

For Excel export, the object provides only the following methods:

• download(filename) - initiates immediate download of the XLSX file

• toBlobAsync() - returns a Promise<Blob> object

JavaScript

const exportResult = dp.exportAs("png");
exportResult.download("calendar.png");

Angular

Use a template reference and ViewChild in an existing component. Invoke exportImage() from a button after initialization.

<daypilot-calendar [config]="config" #calendar></daypilot-calendar>

@ViewChild("calendar") calendar!: DayPilotCalendarComponent;
config: DayPilot.CalendarConfig = {};

exportImage() {
  this.calendar.control.exportAs("png", {area: "full", scale: 2}).download("calendar.png");
}

React

const calendar = useRef(null);
function exportImage() {
  calendar.current.exportAs("png", {area: "full", scale: 2}).download("calendar.png");
}

<DayPilotCalendar
  controlRef={control => { calendar.current = control; }}
/>

Vue

<script setup>
import {ref} from "vue";
const calendar = ref(null);
function exportImage() {
  calendar.value.control.exportAs("png", {area: "full", scale: 2}).download("calendar.png");
}
</script>

<template>
  <DayPilotCalendar ref="calendar" />
</template>

Keep the component’s existing date, data and layout options. Angular imports ViewChild and the DayPilot component type; React imports useRef. Vue uses the DayPilot component already registered or imported by the application.

Bitmap Export Errors

PNG and JPEG export can throw an error with name: "DayPilot.ExportError" and code: "BITMAP_EXPORT_FAILED" if the bitmap cannot be created or encoded. This is a structured error object, not a public constructor.

• stage: "dimensions", "allocation", "drawing" or "encoding"

• format: output MIME type

• width, height, scale: requested logical dimensions and scale

• pixelWidth, pixelHeight: requested bitmap dimensions

• surface: "main" or "group"; surfaceWidth and surfaceHeight: dimensions of the failed surface

• cause: optional underlying error

Native canvas SecurityError exceptions keep their original identity. Image and font loading must be handled separately. The exporter does not automatically reduce scale or paginate a large image; choose a smaller area or scale when appropriate.

See Also

Export [doc.daypilot.org]

DayPilot.Calendar Class