DayPilot.Month.bubble

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

Declaration

DayPilot.Month.bubble

Notes

Assign a DayPilot.Bubble instance to customize the event details shown on hover. For asynchronous loading, set args.async = true and call args.loaded() after assigning args.html.

Examples

JavaScript

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

      // simulating slow server-side load
      setTimeout(() => {
        args.html = "testing bubble for: <br>" + ev.text();
        args.loaded();
      }, 500);
    }
  }),
  // ...
});
month.init();

Angular

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

config: DayPilot.MonthConfig = {
  bubble: new DayPilot.Bubble({
    onLoad: (args) => {
      const ev = args.source;
      args.async = true;  // notify manually using .loaded()

      // simulating slow server-side load
      setTimeout(() => {
        args.html = "testing bubble for: <br>" + ev.text();
        args.loaded();
      }, 500);
    }
  }),
  // ...
};

React

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

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

    // simulating slow server-side load
    setTimeout(() => {
      args.html = "testing bubble for: <br>" + ev.text();
      args.loaded();
    }, 500);
  }
});

Vue

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

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

    // simulating slow server-side load
    setTimeout(() => {
      args.html = "testing bubble for: <br>" + ev.text();
      args.loaded();
    }, 500);
  }
});

See Also

DayPilot.Bubble Class

DayPilot Month Event Bubble [doc.daypilot.org]

DayPilot.Month Class