DayPilot.Calendar.bubble

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

Declaration

DayPilot.Calendar.bubble

Default Value

new DayPilot.Bubble()

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  bubble: new DayPilot.Bubble({
    onLoad: (args) => {
      const ev = args.source;
      args.async = true;  // notify manually using .loaded()
      setTimeout(() => {
        args.html = "testing bubble for: <br>" + ev.text();
        args.loaded();
      }, 500);
    }
  }),
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  bubble: new DayPilot.Bubble({
    onLoad: (args) => {
      const ev = args.source;
      args.async = true;  // notify manually using .loaded()
      setTimeout(() => {
        args.html = "testing bubble for: 
" + ev.text();
        args.loaded();
      }, 500);
    }
  }),
  // ...
};

React

<DayPilotCalendar
  bubble={new DayPilot.Bubble({
    onLoad: (args) => {
      const ev = args.source;
      args.async = true;  // notify manually using .loaded()
      setTimeout(() => {
        args.html = "testing bubble for: <br>" + ev.text();
        args.loaded();
      }, 500);
    }
  })}
  {/* ... */}
/>

Vue

<DayPilotCalendar
  :bubble="new DayPilot.Bubble({
    onLoad: (args) => {
      const ev = args.source;
      args.async = true;  // notify manually using .loaded()
      setTimeout(() => {
        args.html = "testing bubble for: <br>" + ev.text();
        args.loaded();
      }, 500);
    }
  })"
  <!-- ... -->
/>

See Also

• DayPilot Calendar Event Bubble [doc.daypilot.org]

• DayPilot.Bubble Class

• DayPilot.Calendar Class

• Event Bubble (documentation)