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.png

dp.onBeforeCellRender = function(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;" }
      ];
  }
};