DayPilot.Calendar.onAfterEventRender

The onAfterEventRender handler fires after an item has been rendered by the JavaScript Calendar and lets you access the rendered DOM element.

The most common use case is adding custom event handlers to the rendered <div> element.

Do not modify the visible item content using this event because that can cause performance issues. To customize the rendered HTML, use onBeforeEventRender instead.

Declaration

DayPilot.Calendar.onAfterEventRender(args)

Parameters

• args.e (DayPilot.Event) - source object

• args.div - rendered <div> element (the top-level element marked with the *_event CSS class)

Notes

Use this event for post-render DOM access, such as attaching custom event handlers to the rendered element. If you need to change the visible HTML before rendering, use onBeforeEventRender instead.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  onAfterEventRender: (args) => {
    args.div.addEventListener("contextmenu", (ev) => {
      ev.preventDefault();
      console.log("Event:", args.e);
    });
  },
  // ...
});
calendar.init();

Angular

<daypilot-calendar [config]="config"></daypilot-calendar>

config: DayPilot.CalendarConfig = {
  onAfterEventRender: (args) => {
    args.div.addEventListener("contextmenu", (ev) => {
      ev.preventDefault();
      console.log("Event:", args.e);
    });
  },
  // ...
};

React

<DayPilotCalendar
  onAfterEventRender={onAfterEventRender}
  {/* ... */}
/>

const onAfterEventRender = (args) => {
  args.div.addEventListener("contextmenu", (ev) => {
    ev.preventDefault();
    console.log("Event:", args.e);
  });
};

Vue

<DayPilotCalendar
  @afterEventRender="onAfterEventRender"
  <!-- ... -->
/>

const onAfterEventRender = (args) => {
  args.div.addEventListener("contextmenu", (ev) => {
    ev.preventDefault();
    console.log("Event:", args.e);
  });
};

See Also

DayPilot.Calendar.onBeforeEventRender

DayPilot.Calendar Class