Event Bubble

The Scheduler component can display a callout/tooltip with additional information on event hover. This is useful when the event box is too small to display all important information.

The callout is implemented using the Bubble component. The DayPilot.Bubble object lets you define the appearance and behavior of the tooltip, such as the popup delay, animation, CSS theme. You can also use it to load the content on demand.

The bubble can also be used to display details for Scheduler cells, row headers, links, and event groups.

JavaScript Scheduler

In the JavaScript Scheduler component, you can configure the event bubble using the bubble property.

The Scheduler uses a default DayPilot.Bubble instance as the value of the bubble property. That means you don't have to define the bubble unless you want to override the default behavior.

Static Bubble HTML

You can define the bubble content using the bubbleHtml property of the event data object.

<div id="dp"></div>
<script>
  const dp = new DayPilot.Scheduler("dp");
  dp.events.list = [
    {
      start: "2022-03-25T00:00:00",
      end: "2022-03-25T12:00:00",
      id: "123",
      resource: "A",
      text: "Event",
      bubbleHtml: "Testing bubble HTML"
    }
  ];
  // ...
  dp.init();
</script>

You can also define the HTML using the onBeforeEventRender event handler:

<div id="dp"></div>
<script>
  const dp = new DayPilot.Scheduler("dp");
  dp.events.list = [
    {
      start: "2022-03-25T00:00:00",
      end: "2022-03-25T12:00:00",
      id: "123",
      resource: "A",
      text: "Event"
    }
  ];
  dp.onBeforeEventRender = function(args) {
    args.data.bubbleHtml = "Additional information for: " + args.e.text;
  };
  // ...
  dp.init();
</script>

Dynamic Bubble HTML

It is possible to create the bubble content on-demand, right before the bubble is displayed.

• You can define the HTML content using the onLoad event handler of the DayPilot.Bubble object.

• The args.html property will be initialized with the static bubble HTML (if any) and you can override it as needed.

• By default, the args.html is resolved synchronously, right after the onLoad handler is fired. In order to load the HTML from the server, you can switch to an asynchronous mode.

The following example loads the Scheduler event bubble content dynamically from the server using an HTTP call.

// bubble, with async loading
dp.bubble = new DayPilot.Bubble({
    onLoad: (args) => {
      const ev = args.source;
      const id = ev.data.id;
      args.async = true;  // the bubble will be displayed when you call args.loaded()

      DayPilot.Http.get(`/getBubble/${id}`).then((get) => {
        args.html = get.data.html;
        args.loaded();
      });
    }
});

Angular Scheduler

In the Angular Scheduler component, you can define a static bubble HTML using the event data object:

events: DayPilot.EventData[] = [
  {
    id: '1',
    resource: 'R3',
    start: '2022-08-03',
    end: '2022-08-08',
    text: 'Scheduler Event 1',
    bubbleHtml: "<div style='font-weight:bold'>Event Details</div><div>Scheduler Event 1</div>"
  }
  // ...
];

You can also generate the callout HTML content dynamically:

config: DayPilot.SchedulerConfig = {
  // ...
  bubble: new DayPilot.Bubble({
    onLoad: args => {
      const event = args.source;
      args.html = "<div style='font-weight:bold'>Event Details</div><div>" + event.text() + "</div><div>Starting on " + event.start().toString("MMMM d, yyyy") + "</div>";
    }
  })
};

You can also define the content using an Angular component. The following example uses a custom TooltipComponent to display Scheduler event details.

The dynamic Angular component can be added and destroyed using onDomAdd and onDomRemove events:

config: DayPilot.SchedulerConfig = {
  // ...
  bubble: new DayPilot.Bubble({
    onDomAdd: args => {
      console.log("Creating a TooltipComponent");
      const component = this.createTooltipComponent(args.source);
      args.element = component.location.nativeElement;
      (<any>args).component = component;
    },
    onDomRemove: args => {
      console.log("Destroying TooltipComponent");
      (<any>args).component.destroy();
    }
  })
};

The following tutorial includes a downloadable Angular project where you can test all these approaches:

• Angular Scheduler: Dynamic ToolTip

React Scheduler

Tutorial:

• React Scheduler: Rendering JSX Component in Bubble

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

<DayPilot:DayPilotBubble ID="DayPilotBubble1" runat="server" />

protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  e.BubbleHtml = (string) e.DataItem["detail"];
}

<DayPilot:DayPilotBubble ID="DayPilotBubble1" runat="server" 
  OnRenderEventBubble="DayPilotBubble1_RenderEventBubble"
/>

protected void DayPilotBubble1_RenderEventBubble(object sender, RenderEventBubbleEventArgs e)
{
  e.InnerHTML = "<b>Event details</b><br />Here is the right place to show details about the event with ID: " + e.Value + ". This text is loaded dynamically from the server.";
}

@Html.DayPilotBubble("bubble", new DayPilotBubbleConfig {})

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  EventBubble = "bubble",
  ...
})

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.BubbleHtml = (string) e.DataItem["detail"];
}

protected override void OnEventBubble(EventBubbleArgs e)
{
  e.BubbleHtml = "Event details for id: " + e.Id;
}