DayPilot.Month.onBeforeEventDomAdd

The onBeforeEventDomAdd handler runs before an event’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.onBeforeEventDomAdd(args)

Parameters

• args.control (DayPilot.Month, read-only): the control instance.
• args.e (DayPilot.Event, read-only): the event occurrence being rendered.
• 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 onBeforeEventDomRemove for application-owned DOM resources. Framework wrappers manage their own mounting and cleanup.

A multi-day event can have separate rendered parts in different weeks. Do not use its event ID alone to identify one rendered content instance.

JavaScript

const month = new DayPilot.Month("month", {
  onBeforeEventDomAdd: args => {
    const label = document.createElement("strong");
    label.textContent = args.e.text();
    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
  onBeforeEventDomAdd={args => {
    args.element = <strong>{args.e.text()}</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="event" daypilotTemplateFor="month"
               let-event="event">
    <strong>{{ event.text() }}</strong>
  </ng-template>
</daypilot-month>

Vue

Use the corresponding slot in an existing Vue Month component:

<DayPilotMonth>
  <template #event="{event}">
    <strong>{{ event.text() }}</strong>
  </template>
</DayPilotMonth>

See Also

onBeforeEventDomRemove

Month Events