DayPilot.Calendar.onBeforeHeaderExport

The onBeforeHeaderExport event handler fires during image/Excel export for each column header cell. It lets you customize the column headers in the exported file.

Declaration

DayPilot.Calendar.onBeforeHeaderExport(args)

Parameters

• args.text (string) - exported text; by default it is set to the customized HTML

• args.backColor (string) - background color of the time header cell

• args.horizontalAlignment ("left" | "center" | "right") - text alignment; the default value is "center"

• args.verticalAlignment ("top" | "center" | "bottom") - vertical alignment

• args.fontSize - font size

• args.fontFamily - font family

• args.fontStyle - font style

• args.fontColor - font color

• args.header.name - column name from column[].name in resources view; read-only

• args.header.id - column id if specified in resources view; read-only

• args.header.level - header level as a zero-based integer; read-only

• args.header.start - start date (DayPilot.Date); read-only

• args.header.html - customized HTML (string); read-only

Notes

Use args.text to supply the plain text that should appear in the exported image. This is useful when the live header uses customized HTML but the export should show a simpler label such as args.header.name.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  onBeforeHeaderExport: (args) => {
    args.text = args.header.name;
  },
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  onBeforeHeaderExport: (args) => {
    args.text = args.header.name;
  },
  // ...
};

React

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

const onBeforeHeaderExport = (args) => {
  args.text = args.header.name;
};

Vue

<DayPilotCalendar
  @beforeHeaderExport="onBeforeHeaderExport"
  <!-- ... -->
/>

const onBeforeHeaderExport = (args) => {
  args.text = args.header.name;
};

See Also

DayPilot.Calendar Class