Row Header Bubble

A bubble can be displayed on row header hover.

JavaScript

// bubble, with async loading
resourceBubble: new DayPilot.Bubble({
    onLoad: function(args) {
      var r = args.source;
      args.async = true;  // notify manually using .loaded()
            
      // simulating slow server-side load
      setTimeout(function() {
        args.html = "testing bubble for: <br>" + r.id;
        args.loaded();
      }, 500);
    }
})

To add a bubble for a specific row header column, you can use an active area:

onBeforeRowHeaderRender: args => {
    if (args.row.id === "A") {
        args.row.columns = [];
    }

    if (args.row.columns[1]) {
        args.row.columns[1].areas = [
            {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                action: "Bubble",
                bubble: new DayPilot.Bubble({
                    onLoad: args => {
                        const row = dp.rows.find(args.source.id);
                        console.log("row", row);
                        args.html = "bubble HTML";
                    }
                })
            }
        ]
    }
},

API: resourceBubble.

The examples create a resourceBubble that shows the hovered row's name. The bubble's onLoad callback escapes that name before assigning args.html.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    resourceBubble: new DayPilot.Bubble({onLoad: args => { args.html = DayPilot.Util.escapeHtml(args.source.name); }})
  };

}

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      resourceBubble={new DayPilot.Bubble({onLoad: args => { args.html = DayPilot.Util.escapeHtml(args.source.name); }})}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const resourceBubble = new DayPilot.Bubble({onLoad: args => { args.html = DayPilot.Util.escapeHtml(args.source.name); }});

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :resourceBubble="resourceBubble"
    />
  </div>
</template>

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  ResourceBubbleID = "DayPilotBubble1"
/>

<DayPilot:DayPilotBubble ID="DayPilotBubble1" runat="server" 
  CssOnly="true"
  CssClassPrefix="bubble_default"
/>