Link Bubble

The Scheduler component can display link details on hover using a link bubble.

The link bubble is not enabled by default. You need to create a custom DayPilot.Bubble object and assign it to the linkBubble property to activate it:

{
  linkBubble: new DayPilot.Bubble(),
  // ...
}

You can specify the static bubble HTML using the bubbleHtml property of the link data object:

const links =[
  {
    from: 1,
    to: 2,
    type: "FinishToStart",
    bubbleHtml: "Bubble text"
  }
];
dp.update({links});

Another option is to generate the bubble content dynamically using the onLoad event handler:

linkBubble: new DayPilot.Bubble({
  onLoad: args => {
    const e = args.source;
    args.html = "Custom link bubble text";
  }
}),

API: links.list, linkBubble.

The examples generate the dependency's hover text in the bubble's onLoad callback. Because args.html accepts HTML, application text is escaped before assignment.

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

Angular

Create the DayPilot.Bubble instance in config.linkBubble; its callback reads the hovered link from args.source.

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"}],
    links: [{id: "L1", from: 1, to: 2, type: "FinishToStart"}],
    linkBubble: new DayPilot.Bubble({onLoad: args => { args.html = DayPilot.Util.escapeHtml(args.source.data.text || "Planning must finish first"); }})
  };

}

React

Pass the bubble instance through the linkBubble prop. Its HTML callback is separate from JSX rendering.

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"}]}
      links={[{id: "L1", from: 1, to: 2, type: "FinishToStart"}]}
      linkBubble={new DayPilot.Bubble({onLoad: args => { args.html = DayPilot.Util.escapeHtml(args.source.data.text || "Planning must finish first"); }})}
    />
  </div>;
}

Vue

Create linkBubble in <script setup> and bind it with :linkBubble; Vue template interpolation does not process the returned HTML.

<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 links = [{id: "L1", from: 1, to: 2, type: "FinishToStart"}];
const linkBubble = new DayPilot.Bubble({onLoad: args => { args.html = DayPilot.Util.escapeHtml(args.source.data.text || "Planning must finish first"); }});

</script>

<template>
  <div>

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