Using the cell customization event, you can insert active areas into cells. The active areas are rectangular areas with position specified using distance from cell borders (left, right, top, bottom) or using start/end time. You can use them to display icons, custom HTML, hover hints and to provide access to cell context menu.

Display modes

  • Always visible

  • Visible on cell hover

Positioning

  • Combination of left, right, top, bottom, width, height CSS styles (in pixels)

  • Left, right, and width pixel position can be replaced by start/end specified using date/time.

Content

  • HTML

  • Font icon

  • Background color/image

  • Inline CSS styles

  • Custom CSS class

Actions

  • No action

  • Hover: bubble, context menu

  • Click: context menu, custom event handler

JavaScript

Adding a striped overlay to past cells

html5 scheduler grid cell active areas past days

onBeforeCellRender: (args) => {
  if (args.cell.start < DayPilot.Date.today()) {
      args.cell.areas = [
          { left: 0, right: 0, top: 0, bottom: 0, style: "background-image: linear-gradient(135deg, #ddd 10%, transparent 10%, transparent 50%, #ddd 50%, #ddd 60%, transparent 60%, transparent); background-size: 20px 20px;" }
      ];
  }
};

Tutorials

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

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

Learn how to add notes to the cells of a JavaScript Scheduler component. Notes are indicated by a red triangle in the upper-right corner and become visible upon hovering over a cell.