javascript html5 scheduler component event bubble callout

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 cellsrow 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

angular scheduler dynamic tooltip

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:

React Scheduler

react scheduler bubble callout jsx component

Tutorial:

ASP.NET WebForms

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

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

Static bubble HTML

Static bubble HTML can be defined using e.BubbleHtml in BeforeEventRender event handler.

It's possible to specify the Bubble HTML content statically in BeforeEventRender event (and prevent dynamic AJAX call on popup). See also event customization.

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

Dynamic bubble HTML 

If there is no static bubble HTML defined the bubble control will ask for it using RenderEventBubble event of the DayPilotBubble object.

.aspx

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

.aspx.cs

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.";
}

ASP.NET MVC

The bubble object must be declared before it is used (Html.DayPilotBubble helper must be above the Html.DayPilotScheduler helper).

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

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

Static Bubble HTML

Static bubble HTML can be defined in OnBeforeEventRender:

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

Dynamic Bubble HTML

If no static bubble HTML is specified, OnEventBubble event will be invoked (on DayPilotScheduler object).

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