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

See also bubble.


javascript calendar grid cell details bubble

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")


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:

  .calendar_default_cell_inner:hover {
      background-color: #f0f0f0;

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

ASP.NET WebForms


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

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


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