DayPilot.Month.onBeforeEventRender

The onBeforeEventRender event handler fires before the JavaScript Monthly Calendar renders an event. It lets you customize the event properties dynamically.

Declaration

DayPilot.Month.onBeforeEventRender(args)

Parameters

• args.control - DayPilot.Month reference; available since 2023.3.5716

• args.data - raw event data object (shallow copy)

Notes

Use this handler to modify args.data before the event is displayed. You can set fields such as cssClass and html dynamically for each rendered event.

Examples

JavaScript

const month = new DayPilot.Month("dp", {
  onBeforeEventRender: (args) => {
    args.data.cssClass = "test";
    args.data.html = args.data.text + " " + args.data.start.toString("h:mm tt");
  },
  // ...
});
month.init();

Angular

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

config: DayPilot.MonthConfig = {
  onBeforeEventRender: (args) => {
    args.data.cssClass = "test";
    args.data.html = args.data.text + " " + args.data.start.toString("h:mm tt");
  },
  // ...
};

React

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

const onBeforeEventRender = (args) => {
  args.data.cssClass = "test";
  args.data.html = args.data.text + " " + args.data.start.toString("h:mm tt");
};

Vue

<DayPilotMonth
  @beforeEventRender="onBeforeEventRender"
  <!-- ... -->
/>

const onBeforeEventRender = (args) => {
  args.data.cssClass = "test";
  args.data.html = args.data.text + " " + args.data.start.toString("h:mm tt");
};

See Also

Event Customization [doc.daypilot.org]

DayPilot.Month Class