DayPilot.Calendar.onBeforeEventRender

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

Declaration

DayPilot.Calendar.onBeforeEventRender(args)

Parameters

• args.control (DayPilot.Calendar) - control instance; available since 2023.3.5716

• args.data - a shallow copy of the raw event data object, with start and end converted to DayPilot.Date

Notes

Use this callback to modify the shallow args.data copy before the event is displayed. The converted start and end values let you format the visible output directly using DayPilot.Date methods.

When setting custom HTML using args.data.html, make sure all input values are properly escaped to prevent XSS attacks.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  onBeforeEventRender: (args) => {
    const text = DayPilot.Util.escapeHtml(args.data.text);
    const start = args.data.start.toString("h:mm tt");
    const end = args.data.end.toString("h:mm tt");
    args.data.html = `${text} (${start} - ${end})`;
    args.data.cssClass = "test";
  },
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  onBeforeEventRender: (args) => {
    const text = DayPilot.Util.escapeHtml(args.data.text);
    const start = args.data.start.toString("h:mm tt");
    const end = args.data.end.toString("h:mm tt");
    args.data.html = `${text} (${start} - ${end})`;
    args.data.cssClass = "test";
  },
  // ...
};

React

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

const onBeforeEventRender = (args) => {
  const text = DayPilot.Util.escapeHtml(args.data.text);
  const start = args.data.start.toString("h:mm tt");
  const end = args.data.end.toString("h:mm tt");
  args.data.html = `${text} (${start} - ${end})`;
  args.data.cssClass = "test";
};

Vue

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

const onBeforeEventRender = (args) => {
  const text = DayPilot.Util.escapeHtml(args.data.text);
  const start = args.data.start.toString("h:mm tt");
  const end = args.data.end.toString("h:mm tt");
  args.data.html = `${text} (${start} - ${end})`;
  args.data.cssClass = "test";
};

See Also

Event Customization [doc.daypilot.org]

XSS Protection [doc.daypilot.org]

DayPilot.Calendar Class