Event Bubble

The bubble is an extended tooltip (title HTML attribute).

It allows to display a box with additional information.

Activation

• hover (EventHoverHandling="Bubble", default)
• click (EventClickHandling="Bubble")
• double click (EventDoubleClickHandling="Bubble")
• right click (EventRightClickHandling="Bubble")

Event Click Activation

In order to show the bubble only upon event click do the following:

1. Set EventClickHandling to "Bubble".
2. Set EventHoverHandling to "Disabled" (the default "Bubble value would activate the bubble on hover).
3. Assign your DayPilotBubble control id to BubbleID property.
4. Set DayPilotBubble.HideAfter property to "0" (this will prevent automatic bubble hiding on mouseout).

Disabling the ToolTip

By default, events will display a tooltip (using a title HTML attribute) with the event text as content.

You can disable it using ShowTooltip property.

JavaScript

See also DayPilot.Month.bubble.

Static Bubble HTML

Define bubbleHtml in the event data object.

<div id="dp"></div>
<script type="text/javascript">

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

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

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

Dynamic Bubble HTML

Provide the HTML in the onLoad event handler of DayPilot.Bubble object.

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

<DayPilot:DayPilotMonth runat="server" id="DayPilotMonth1"
  ...
  BubbleID = "DayPilotBubble1"
  ShowToolTip = "false"
/>

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

protected void DayPilotMonth1_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")

@Html.DayPilotMonth("dpm", new DayPilotMonthConfig {
  BackendUrl = ResolveUrl("~/Month/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;
}