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.areas (DayPilot.AreaData[]): active areas for image export

• 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.

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", {
  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
  :onBeforeHeaderExport="onBeforeHeaderExport"
/>

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

See Also

DayPilot.Calendar Class