DayPilot.Scheduler.groupBubble

The groupBubble property (DayPilot.Bubble object) specifies the bubble used to display event group details on hover.

Declaration

DayPilot.Scheduler.groupBubble

Default Value

null

Notes

In the bubble onLoad handler, args.source exposes the grouped event data:

• args.source.events contains an array of events in the group (DayPilot.Event objects).

Examples

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  groupConcurrentEvents: true,
  groupBubble: new DayPilot.Bubble({
    onLoad: (args) => {
      const count = args.source.events.length;
      args.html = "Click to expand this group with " + count + " events.";
    }
  }),
  // ...
});
dp.init();

Angular

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

config: DayPilot.SchedulerConfig = {
  groupConcurrentEvents: true,
  groupBubble: new DayPilot.Bubble({
    onLoad: (args) => {
      const count = args.source.events.length;
      args.html = "Click to expand this group with " + count + " events.";
    }
  }),
  // ...
};

React

<DayPilotScheduler
  groupConcurrentEvents={true}
  groupBubble={groupBubble}
  {/* ... */}
/>

const groupBubble = new DayPilot.Bubble({
  onLoad: (args) => {
    const count = args.source.events.length;
    args.html = "Click to expand this group with " + count + " events.";
  }
});

Vue

<DayPilotScheduler
  :groupConcurrentEvents="true"
  :groupBubble="groupBubble"
  <!-- ... -->
/>

data() {
  return {
    groupBubble: new DayPilot.Bubble({
      onLoad: (args) => {
        const count = args.source.events.length;
        args.html = "Click to expand this group with " + count + " events.";
      }
    })
  };
}

See Also

DayPilot.Scheduler.groupConcurrentEvents

DayPilot.Scheduler.bubble

DayPilot.Scheduler.cellBubble

DayPilot.Scheduler.resourceBubble

Concurrent Event Groups [doc.daypilot.org]

DayPilot.Scheduler Class