DayPilot.Queue.bubble

The bubble property (DayPilot.Bubble) specifies the bubble object that will be used to show a callout with queue item details on hover.

Available since version 2022.4.5467.

Declaration

DayPilot.Queue.bubble

Default Value

new DayPilot.Bubble()

Notes

A simple bubble can display the DayPilot.Event.data.bubbleHtml value. You can also load the bubble content dynamically using the bubble onLoad callback.

Examples

JavaScript

Simple bubble that displays DayPilot.Event.data.bubbleHtml value:

const queue = new DayPilot.Queue("dp", {
  bubble: new DayPilot.Bubble(),
  // ...
});
queue.init();

Bubble with dynamically loaded content:

const queue = new DayPilot.Queue("dp", {
  bubble: new DayPilot.Bubble({
    onLoad: async (args) => {
      const ev = args.source;
      args.async = true;  // notify manually using .loaded()

      const {data} = await DayPilot.Http.get(`/details/${ev.id()}`);
      args.html = data;
      args.loaded();
    }
  }),
  // ...
});
queue.init();

Angular

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

config: DayPilot.QueueConfig = {
  bubble: new DayPilot.Bubble(),
  // ...
};

React

<DayPilotQueue
  bubble={bubble}
  {/* ... */}
/>

const bubble = new DayPilot.Bubble();

Vue

<DayPilotQueue
  :bubble="bubble"
  <!-- ... -->
/>

const bubble = new DayPilot.Bubble();

See Also

DayPilot.Bubble Class

DayPilot.Event.data

DayPilot.Queue.eventHoverHandling

DayPilot.Queue Class