Client-Side Image Export

You can export the Calendar using the exportAs() method on the client side.

Supported export formats:

• JPEG

• PNG

• SVG

You can also embed the output image in a PDF document.

This feature is available since version 8.4.

Event Corner Radii

Image export preserves uniform event corner radii specified in pixels, and clips event contents to the rounded shape.

Active Areas and Appearance

PNG, JPEG and SVG export include supported active areas from event boxes, grid cells and column headers. Areas can supply text, colors, borders, images and SVG symbols. Positioning and clipping follow the containing item and the exported viewport.

Use onBeforeEventExport and the corresponding cell/header export callbacks to replace args.areas or clear it with []. The descriptors are copied for export. Areas created only by onAfterRender DOM code are not rendered; supply their supported descriptor fields instead.

Image export supports numeric, uniform active-area corner radii and selected border sides. CSS percentage radii, different radii on individual corners and arbitrary custom HTML are not supported.

PNG and JPEG exports can fail when a browser cannot allocate, draw or encode a bitmap. Handle BITMAP_EXPORT_FAILED and inspect its stage; see the exportAs() error contract. Use a smaller area or scale when needed. SVG avoids bitmap allocation; asset and font loading remain application responsibilities.

These excerpts configure an existing DayPilot Pro component. Keep its current timeline, resources and events.

JavaScript

const dp = new DayPilot.Calendar("dp", {
  onBeforeEventExport: (args) => { args.areas = []; }
});
dp.init();

Angular

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

config: DayPilot.CalendarConfig = {
  onBeforeEventExport: (args) => { args.areas = []; }
};

React

<DayPilotCalendar
  onBeforeEventExport={(args) => { args.areas = []; }}
/>

Vue

<DayPilotCalendar
  :onBeforeEventExport='(args) => { args.areas = []; }'
/>

The example suppresses active areas on exported events while retaining them in the interactive view. Use the calendar control’s exportAs() method to download the image; see the linked API reference for framework control access.

Download an Image

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

<div>
  <button id="download-button">Download</button>
</div>

<script type="text/javascript">

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

    $(document).ready(function() {
        $("#download-button").click(function(ev) {
            ev.preventDefault();
            dp.exportAs("jpeg").download();
        });
    });

</script>

Tutorial

• JavaScript Calendar: PDF Export Tutorial