DayPilot.Scheduler.onBeforeTimeHeaderDomAdd

The onBeforeTimeHeaderDomAdd event handler runs before a Scheduler time header’s custom DOM content is added. Assign content to args.element to replace the date label.

Declaration

DayPilot.Scheduler.onBeforeTimeHeaderDomAdd(args)

Parameters

• args.control (DayPilot.Scheduler, read-only): the Scheduler instance.

• args.header.start (DayPilot.Date, read-only): header start.

• args.header.end (DayPilot.Date, read-only): header end.

• args.header.level (number, read-only): zero-based header row index.

• args.element: the custom DOM element, React element or Vue content supported by the corresponding wrapper. Leave it unset to keep the ordinary date label.

Lifecycle

In Pro, with progressive time header rendering, headers are created as needed and can be removed after leaving the rendering cache. A full update or disposal also removes existing headers. Keep values that must survive removal in application state.

In Pro, floating time headers move the existing custom content. Floating movement alone does not create or remove a component. React and Vue wrappers handle mounting and unmounting; do not create or dispose a separate framework root for this content.

Example

For a timeline with timeHeaders: [{groupBy: "Day"}, {groupBy: "Hour"}], emphasize the weekday in each day label. Hour labels keep their default content.

onBeforeTimeHeaderDomAdd: args => {
  if (args.header.level !== 0) return;
  const label = document.createElement("span");
  const weekday = document.createElement("strong");
  weekday.textContent = args.header.start.toString("ddd");
  label.append(weekday, " " + args.header.start.toString("d MMM"));
  args.element = label;
}

For React, assign a React element to args.element. In Vue, use the timeHeader slot. See the framework examples in Time Header Customization.

See Also

• Time Header Customization: JavaScript, React and Vue examples

• onBeforeTimeHeaderDomRemove

• onBeforeTimeHeaderRender

• DayPilot.Scheduler Class