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.

Examples

JavaScript

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

Angular

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

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

React

<DayPilotCalendar
  onBeforeEventExport={onBeforeEventExport}
  {/* ... */}
/>

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

Vue

<DayPilotCalendar
  @beforeEventExport="onBeforeEventExport"
  <!-- ... -->
/>

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

See Also

Client-Side Export [doc.daypilot.org]

DayPilot.Calendar Class