DayPilot.Month.onAfterEventRender

The onAfterEventRender event handler fires after the JavaScript Monthly Calendar adds an event element to the DOM.

You can use this event to add custom event handlers using addEventListener().

Declaration

DayPilot.Month.onAfterEventRender(args)

Parameters

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

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

Notes

Do not modify the visible content using this event because that would cause performance issues. To customize the event HTML before rendering, use DayPilot.Month.onBeforeEventRender instead.

Examples

JavaScript

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

Angular

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

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

React

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

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

Vue

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

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

See Also

DayPilot.Month.onBeforeEventRender

DayPilot.Month Class