Cell Bubble

The bubble can display detailed information about a time cell on hover.

See also bubble.

JavaScript

In the JavaScript calendar component, you can display custom context on hover using a cell bubble:

• Define the bubble object using the cellBubble property
• You can use the onLoad event handler of the Bubble to create the content dynamically (args.html).
• By default, the bubble is displayed right above the calendar cell (position: "Above")

Example:

dp.cellBubble = new DayPilot.Bubble({
    onLoad: (args) => {
      const ev = args.source;
      args.html = "Calendar cell details:<br>" + ev.start.toString("hh:mm tt");
    }
});

To highlight the focused calendar cell, you can add a hover style to the CSS:

<style>
  .calendar_default_cell_inner:hover {
      background-color: #f0f0f0;
  }
</style>

The cell background will be changed to light gray when you move the mouse over it.

<DayPilot:DayPilotCalendar runat="server" id="DayPilotCalendar1"
  ...
  CellBubbleID = "DayPilotBubble1"
/>

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

protected void DayPilotBubble1_OnRenderCellBubble(object sender, RenderCellBubbleEventArgs e)
{
  e.InnerHTML = "Information for cell starting at " + e.Start;
}