DayPilot.Month.exportAs

The exportAs() method exports the monthly calendar as an image or Excel spreadsheet.

Declaration

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

Parameters

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

• options.area ("viewport" | "full" | "range") - exported area; defaults to "viewport"

• options.dateFrom - start date (applies only to area: "range")

• options.dateTo - end date (applies only to area: "range")

• options.quality - quality of the output JPEG image (applies only to format: "jpeg"); defaults to 0.92

• options.scale - output scale factor; defaults to 1 (use 2 for 200% magnification)

Excel Export

Provide the ExcelJS library through the exceljs configuration property. For "xlsx", area: "range" exports complete displayed weeks intersecting the half-open interval [dateFrom, dateTo). It respects the configured week start and hidden weekends and does not create weeks outside the loaded grid. "full" and "viewport" export the full loaded grid.

The XLSX result supports download(filename) and toBlobAsync(): Promise<Blob>. See Month Excel Export.

Return Value

Returns a DayPilot.Export object that provides the following methods:

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

• toHtml() - returns the image element as HTML

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

• toBlob() - returns a Blob object

• download(filename) - forces download of the image

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

Notes

Use options.area to export the current viewport, the full calendar, or a custom date range. When area is set to "range", you need to specify options.dateFrom and options.dateTo.

The quality option only affects JPEG output, and scale controls the size of the generated image.

JavaScript

const image = dp.exportAs("png", {
  area: "full",
  scale: 2
});

image.download("month.png");

Angular

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

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

@ViewChild("month") month!: DayPilotMonthComponent;
config: DayPilot.MonthConfig = {};

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

React

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

<DayPilotMonth
  controlRef={control => { month.current = control; }}
/>

Vue

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

<template>
  <DayPilotMonth ref="month" />
</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

DayPilot.Month Class