Activation

JavaScript

Event bubbles can be activated by hover, click, double-click, or right-click in the JavaScript Calendar, Scheduler, and Month components.

Mouse hover activation

Assign a DayPilot.Bubble instance to the component's bubble property. Hover activation is enabled by default; use eventHoverHandling: "Bubble" to enable it explicitly. Use showAfter to set the delay in milliseconds.

In the following examples, dp is a Calendar, Scheduler, or Month instance. Apply these settings before calling dp.init().

dp.bubble = new DayPilot.Bubble({
  showAfter: 500,
  onLoad: args => {
    args.html = DayPilot.Util.escapeHtml(args.source.text());
  }
});
dp.eventHoverHandling = "Bubble";

Click activation

To open event bubbles on click and disable hover activation:

dp.bubble = new DayPilot.Bubble({
  hideAfter: 0,
  onLoad: args => {
    args.html = DayPilot.Util.escapeHtml(args.source.text());
  }
});
dp.eventHoverHandling = "Disabled";
dp.eventClickHandling = "Bubble";

The hideAfter value of 0 keeps the bubble open when the pointer leaves the event and bubble. By default, clicking inside the bubble closes it; see hideOnClick.

To use a different activation gesture, set eventDoubleClickHandling or eventRightClickHandling to "Bubble". Disable hover activation if you want the bubble to appear only for that gesture. If switching from the click example above, also set eventClickHandling to "Disabled".

The onLoad handler receives the event as args.source. These examples encode its text before using it as HTML.

Legacy server controls

The server-control properties below use PascalCase names and a separate Bubble control. For example, see Calendar bubbles.

Mouse hover activation

Use the ShowAfter property to specify the hover activation delay in milliseconds.

Click activation

For Calendar server controls that support the "Bubble" action, configure EventClickHandling, EventDoubleClickHandling, or EventRightClickHandling for the desired gesture.

To display the bubble only on event click:

1. Set EventClickHandling to "Bubble".
2. Set EventHoverHandling to "Disabled".
3. Assign the DayPilot Bubble control ID to BubbleID.
4. Set the Bubble control's HideAfter property to 0 to prevent automatic hiding on mouseout.