DayPilot.Scheduler.rowHeaderColumnBubble

The rowHeaderColumnBubble property (DayPilot.Bubble) specifies the bubble object used to display row header column title details on hover in the JavaScript Scheduler component.

Declaration

DayPilot.Scheduler.rowHeaderColumnBubble

Default Value

null

Notes

• In the bubble onLoad handler, args.source stores the column definition item object from the rowHeaderColumns array.

• Use a custom DayPilot.Bubble instance to load column-specific hover content dynamically.

Examples

JavaScript

const rowHeaderColumnBubble = new DayPilot.Bubble({
  onLoad: (args) => {
    const column = args.source;
    args.html = "Column details";
  }
});

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

Angular

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

config: DayPilot.SchedulerConfig = {
  rowHeaderColumnBubble: new DayPilot.Bubble({
    onLoad: (args) => {
      const column = args.source;
      args.html = "Column details";
    }
  }),
  // ...
};

React

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

Vue

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

See Also

DayPilot.Bubble Class

DayPilot.Scheduler.rowHeaderColumns

DayPilot.Scheduler.bubble

DayPilot.Scheduler.cellBubble

DayPilot.Scheduler.resourceBubble

DayPilot.Scheduler.groupBubble

DayPilot.Scheduler Class