DayPilot.Gantt.onBeforeTaskExport

The onBeforeTaskExport event handler fires during image export. It lets you customize how Gantt Chart task boxes appear in the exported image.

Declaration

DayPilot.Gantt.onBeforeTaskExport(args)

Parameters

• args.areas (array) - active areas included in the exported image.
• args.backColor (string) - task box background color.
• args.barHeight (number) - task box height in pixels.
• args.borderColor (string) - task box border color.
• args.fontColor (string) - text color.
• args.fontFamily (string) - font family.
• args.fontSize (string) - font size.
• args.fontStyle ("normal" | "bold") - font weight.
• args.horizontalAlignment ("left" | "center" | "right") - horizontal text alignment.
• args.task - exported DayPilot.Task object (read-only).
• args.text (string) - exported task text.
• args.textLeft (string) - text displayed on the left side of the task.
• args.textPadding (number) - text padding in pixels.
• args.textRight (string) - text displayed on the right side of the task.
• args.verticalAlignment ("top" | "center" | "bottom") - vertical text alignment.

Notes

Client-side image export doesn't support HTML inside task boxes. Use args.text, args.textLeft, and args.textRight to provide plain-text export output.

args.areas includes active areas defined in the task data and additional areas added in onBeforeTaskRender. See also Task Customization and Task Active Areas.

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.

Image export includes supported active-area descriptors on normal tasks, task groups and milestones.

Examples

JavaScript

const gantt = new DayPilot.Gantt("dp", {
  onBeforeTaskExport: (args) => {
    args.text = String(args.task.data.box?.html ?? args.text ?? "").replace(/<br\s*\/?>/g, "\n");
  },
  // ...
});
gantt.init();

Angular

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

config: DayPilot.GanttConfig = {
  onBeforeTaskExport: args => {
    args.text = String(args.task.data.box?.html ?? args.text ?? "").replace(/<br\s*\/?>/g, "\n");
  },
  // ...
};

React

<DayPilotGantt
  onBeforeTaskExport={onBeforeTaskExport}
/>

const onBeforeTaskExport = (args) => {
  args.text = String(args.task.data.box?.html ?? args.text ?? "").replace(/<br\s*\/?>/g, "\n");
};

Vue

<DayPilotGantt
  :onBeforeTaskExport="onBeforeTaskExport"
/>

const onBeforeTaskExport = (args) => {
  args.text = String(args.task.data.box?.html ?? args.text ?? "").replace(/<br\s*\/?>/g, "\n");
};

See Also

Client-Side Image Export [doc.daypilot.org]

Task Customization [doc.daypilot.org]

Task Active Areas [doc.daypilot.org]

DayPilot.Gantt.onBeforeTaskRender

DayPilot.Gantt Class