DayPilot.Navigator.onBeforeCellDomAdd

The onBeforeCellDomAdd handler runs before a day cell’s custom content is added. Assign a DOM element, or content supported by the framework wrapper, to args.element. Leave it unset to retain ordinary rendering.

Declaration

DayPilot.Navigator.onBeforeCellDomAdd(args)

Parameters

• args.control (DayPilot.Navigator, read-only): the control instance.
• args.cell.day (DayPilot.Date, read-only): the date.
• args.cell.isCurrentMonth, args.cell.isToday, args.cell.isWeekend (boolean, read-only): date flags.
• args.cell.events.all(): the supplied DayPilot.Event objects associated with the day.
• args.element (writable): the custom content to render.

Rendering and Lifetime

The callback belongs to a rendered occurrence, rather than permanently to the data item. Navigation, updates or disposal can remove that occurrence. Use onBeforeCellDomRemove for application-owned DOM resources. Framework wrappers manage their own mounting and cleanup.

JavaScript

const navigator = new DayPilot.Navigator("navigator", {
  onBeforeCellDomAdd: args => {
    const label = document.createElement("strong");
    label.textContent = args.cell.day.toString("d");
    args.element = label;
  }
});
navigator.init();

React

In an existing React Navigator component, assign JSX to args.element. Lite supports React content here since version 2026.4.895.

<DayPilotNavigator
  onBeforeCellDomAdd={args => {
    args.element = <strong>{args.cell.day.toString("d")}</strong>;
  }}
/>

Angular

Prefer a named template in an existing Angular Navigator component importing DayPilotModule. Lite templates require version 2026.4.895. A template takes precedence over the matching DOM-add callback.

<daypilot-navigator [config]="config">
  <ng-template daypilotTemplate="cell" daypilotTemplateFor="navigator"
               let-cell="cell">
    <strong>{{ cell.day.toString("d") }}</strong>
  </ng-template>
</daypilot-navigator>

Vue

Use the corresponding slot in an existing Vue Navigator component:

<DayPilotNavigator>
  <template #cell="{cell}">
    <strong>{{ cell.day.toString("d") }}</strong>
  </template>
</DayPilotNavigator>

See Also

onBeforeCellDomRemove

Navigator Events