The afterEventRender event handler fires after an event is rendered in legacy api=1 mode and gives you access to the rendered event <div> element.

Declaration

DayPilot.Scheduler.afterEventRender(e, div)

Parameters

  • e (DayPilot.Event) - the event reference

  • div (object) - reference to the event <div> element

Notes

This legacy callback runs after the Scheduler inserts the event element into the DOM. Use it for post-render DOM adjustments or for attaching client-side behavior to the rendered element.

If you need to modify the rendered event HTML before it is displayed, use DayPilot.Scheduler.onBeforeEventRender instead. In the current JavaScript API, use DayPilot.Scheduler.onAfterEventRender.

Examples

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  api: 1,
  afterEventRender: (e, div) => {
    div.classList.add("custom-event");
  },
  // ...
});
dp.init();

Angular

<daypilot-scheduler [config]="config"></daypilot-scheduler>
config = {
  api: 1,
  afterEventRender: (e, div) => {
    div.classList.add("custom-event");
  },
  // ...
};

React

<DayPilotScheduler
  config={config}
  {/* ... */}
/>
const config = {
  api: 1,
  afterEventRender: (e, div) => {
    div.classList.add("custom-event");
  },
  // ...
};

Vue

<DayPilotScheduler
  :config="config"
  <!-- ... -->
/>
const config = {
  api: 1,
  afterEventRender: (e, div) => {
    div.classList.add("custom-event");
  },
  // ...
};

See Also

DayPilot.Scheduler.onAfterEventRender

DayPilot.Scheduler.onBeforeEventRender

DayPilot.Scheduler Class