DayPilot.Calendar.onBeforeEventExport

The onBeforeEventExport event handler fires during image/Excel export. Use it to provide alternative plain-text content for the exported event box because image export doesn't support HTML in event boxes.

Declaration

DayPilot.Calendar.onBeforeEventExport(args)

Parameters

• args.areas - array of active areas (since 2025.4.6770)

• args.backColor - background color

• args.barBackColor - duration bar background color

• args.barColor - duration bar color

• args.barWidth - duration bar width in pixels

• args.borderColor - event border color

• args.e (DayPilot.Event) - exported event

• args.fontColor - event font color

• args.fontFamily - event font family

• args.fontSize - font size

• args.fontStyle - event font style

• args.horizontalAlignment ("left" | "right" | "center") - text alignment

• args.text - exported text

Notes

Use args.text when the interactive event uses rich HTML but the export needs a plain-text fallback. The callback also exposes the exported colors, fonts, alignment, duration bar styling, and active areas so you can tune the image output for each event.

Active Areas in Image Export

For PNG, JPEG and SVG export, args.areas contains copies of the active-area descriptors prepared for this item. Replace it or assign [] to change only the exported areas. The export does not call an area’s onAfterRender DOM callback. Custom HTML remains outside the supported image-export representation.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  onBeforeEventExport: (args) => {
    args.text = (args.e.data.html ?? args.e.text()).replace("<br>", "\n");
  },
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  onBeforeEventExport: (args) => {
    args.text = (args.e.data.html ?? args.e.text()).replace("<br>", "\n");
  },
  // ...
};

React

<DayPilotCalendar
  onBeforeEventExport={onBeforeEventExport}
/>

const onBeforeEventExport = (args) => {
  args.text = (args.e.data.html ?? args.e.text()).replace("<br>", "\n");
};

Vue

<DayPilotCalendar
  :onBeforeEventExport="onBeforeEventExport"
/>

const onBeforeEventExport = (args) => {
  args.text = (args.e.data.html ?? args.e.text()).replace("<br>", "\n");
};

See Also

Client-Side Export [doc.daypilot.org]

DayPilot.Calendar Class