DayPilot.Month.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.Month.onBeforeCellDomAdd(args)

Parameters

• args.control (DayPilot.Month, read-only): the control instance.
• args.cell.start and args.cell.end (DayPilot.Date, read-only): the day-cell range, with an exclusive end.
• 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 month = new DayPilot.Month("month", {
  onBeforeCellDomAdd: args => {
    const label = document.createElement("strong");
    label.textContent = args.cell.start.toString("d");
    args.element = label;
  }
});
month.init();

React

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

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

Angular

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

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

Vue

Use the corresponding slot in an existing Vue Month component:

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

See Also

onBeforeCellDomRemove

Month Events