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.

Examples

JavaScript

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

React

<DayPilotGantt
  onBeforeTaskExport={onBeforeTaskExport}
  {/* ... */}
/>

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

Vue

<DayPilotGantt
  @beforeTaskExport="onBeforeTaskExport"
  <!-- ... -->
/>

const onBeforeTaskExport = (args) => {
  args.text = String(args.task.data.html || "").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