A bubble can be displayed on grid cell hover.

javascript scheduler grid cell bubble callout

JavaScript

<div id="scheduler"></div>

<script>
  const scheduler = new DayPilot.Scheduler("scheduler", {
    cellBubble: new DayPilot.Bubble({
      onLoad: (args) => {
        const cell = args.source;
        args.html = cell.start.toString("d MMMM yyyy");
      }
    }),
    // ...
  });
  scheduler.init();
</script>

Tutorials

How to Add Excel-Like Notes to JavaScript Scheduler Grid Cells

How to Add Excel Like Notes to JavaScript Scheduler Grid Cells Tutorial

This tutorial shows how to customize the cell bubble content to include an editable text area with cell notes.

ASP.NET WebForms

 
<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  CellBubbleID = "DayPilotBubble1"
/>

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

By default, the Bubble HTML content is determined by calling a server-side event:

  • RenderCellBubble

The HTML can be set by changing e.InnerHTML:

  • e.InnerHTML = "Event Details";

You can one Bubble control for several controls. The ID of the source control is stored in e.SourceUniqueID property:

  • e.SourceUniqueID