monthly-event-calendar-html5-bubble.png

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.

ASP.NET WebForms

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

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

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 DayPilotMonth1_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.DayPilotMonth helper).

@Html.DayPilotBubble("bubble")

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

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

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);
    }
});