DayPilot.Scheduler.onBeforeGroupRender

The onBeforeGroupRender event handler lets you customize the concurrent event group boxes displayed by the JavaScript Scheduler component.

Declaration

DayPilot.Scheduler.onBeforeGroupRender(args)

Parameters

• args.group.count (number) - concurrent event count in this group

• args.group.events (array of DayPilot.Event) - events in the group (available since 8.3.2847)

• args.group.html (string) - HTML of the group box

• args.group.bubbleHtml (string) - static bubble content

Notes

Use this event to summarize or restyle aggregated overlap groups before they are rendered. You can change the group box body using args.group.html and define the static bubble content using args.group.bubbleHtml.

Examples

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  onBeforeGroupRender: (args) => {
    args.group.html = args.group.count + " events in this group";
  },
  // ...
});
dp.init();

Angular

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

config: DayPilot.SchedulerConfig = {
  onBeforeGroupRender: (args) => {
    args.group.html = args.group.count + " events in this group";
  },
  // ...
};

React

<DayPilotScheduler
  onBeforeGroupRender={onBeforeGroupRender}
  {/* ... */}
/>

const onBeforeGroupRender = (args) => {
  args.group.html = args.group.count + " events in this group";
};

Vue

<DayPilotScheduler
  @beforeGroupRender="onBeforeGroupRender"
  <!-- ... -->
/>

const onBeforeGroupRender = (args) => {
  args.group.html = args.group.count + " events in this group";
};

See Also

Concurrent Event Groups [doc.daypilot.org]

DayPilot.Scheduler Class