DayPilot.Scheduler.cellBubble

The cellBubble property specifies the DayPilot.Bubble object used to display time cell details on hover in the JavaScript Scheduler component.

Declaration

DayPilot.Scheduler.cellBubble

Default Value

null

Notes

Assign a DayPilot.Bubble instance to load custom time cell details when the user hovers over a grid cell.

Examples

JavaScript

const cellBubble = new DayPilot.Bubble({
  onLoad: (args) => {
    const cell = args.source;
    args.html = cell.start + " " + cell.end + " " + cell.resource;
  }
});

const dp = new DayPilot.Scheduler("dp", {
  cellBubble: cellBubble,
  // ...
});
dp.init();

Angular

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

config: DayPilot.SchedulerConfig = {
  cellBubble: new DayPilot.Bubble({
    onLoad: (args) => {
      const cell = args.source;
      args.html = cell.start + " " + cell.end + " " + cell.resource;
    }
  }),
  // ...
};

React

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

Vue

<DayPilotScheduler
  :cellBubble="cellBubble"
  <!-- ... -->
/>

See Also

DayPilot.Bubble Class

DayPilot.Scheduler.bubble

DayPilot.Scheduler.groupBubble

DayPilot.Scheduler.resourceBubble

DayPilot.Scheduler.timeHeaderBubble

DayPilot.Scheduler Class