DayPilot.Scheduler.timeHeaderBubble

The timeHeaderBubble property (DayPilot.Bubble) specifies the bubble object used to show time header cell details on hover.

Available since 2025.3.6583.

Declaration

DayPilot.Scheduler.timeHeaderBubble

Default Value

null

Notes

Assign a DayPilot.Bubble Class instance to show custom details for Scheduler time header cells.

If timeHeaderBubble is not null, the toolTip value specified in DayPilot.Scheduler.onBeforeTimeHeaderRender is ignored.

Examples

JavaScript

const timeHeaderBubble = new DayPilot.Bubble({
  onLoad: (args) => {
    const cell = args.source;
    const date = cell.start.toString("M/d/yyyy");
    args.html = `<div>${date}</div>`;
  }
});

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

Angular

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

config: DayPilot.SchedulerConfig = {
  timeHeaderBubble: new DayPilot.Bubble({
    onLoad: (args) => {
      const cell = args.source;
      const date = cell.start.toString("M/d/yyyy");
      args.html = `<div>${date}</div>`;
    }
  }),
  // ...
};

React

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

const timeHeaderBubble = new DayPilot.Bubble({
  onLoad: (args) => {
    const cell = args.source;
    const date = cell.start.toString("M/d/yyyy");
    args.html = `<div>${date}</div>`;
  }
});

Vue

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

const timeHeaderBubble = new DayPilot.Bubble({
  onLoad: (args) => {
    const cell = args.source;
    const date = cell.start.toString("M/d/yyyy");
    args.html = `<div>${date}</div>`;
  }
});

See Also

DayPilot.Bubble Class

DayPilot.Scheduler.onBeforeTimeHeaderRender

DayPilot.Scheduler.bubble

DayPilot.Scheduler.cellBubble

DayPilot.Scheduler.groupBubble

DayPilot.Scheduler.resourceBubble

DayPilot.Scheduler Class