html5-javascript-scheduler-frozen-rows.png

The Scheduler can display one or more rows at the top and/or bottom in a fixed non-scrolling area.

Available since 2020.1.4205

How to Freeze Scheduler Rows

Use frozen property of resource data object. Two values are accepted:

  • "top" - the row will be frozen at the top of the Scheduler
  • "bottom" - the row will be frozen at the bottom of the Scheduler

Example:

dp.resources = [
    { name: "Frozen 1", id: "frozen1", frozen: "top"},
    { name: "Frozen 2", id: "frozen2", frozen: "top"},
{ name: "Frozen 3", id: "frozen3", frozen: "bottom"},
{ name: "Locations", id: "G1", expanded: true, children: [ {name: "Room 1", id: "A"}, {name: "Room 2", id: "B"}, {name: "Room 3", id: "C"}, {name: "Room 4", id: "D"} ] }, // ... ];

Only the top-level resources will be scanned for frozen rows. The order of rows in resources[] array will be respected.

Identification of Frozen Rows

DayPilot.Row.grid stores the grid id: "top" | "bottom" | "main"

dp.onBeforeRowHeaderRender = function(args) {
    if (args.row.grid !== "main") {
        args.row.backColor = "#ffd966";
    }
};

Identification of Cells in Frozen Rows

Cell.grid stores the grid id: "top" | "bottom" | "main"

dp.onBeforeCellRender = function(args) {
    if (args.cell.grid !== "main") {
        args.cell.backColor = "#f0f0f0";
    }
};

Limitations

The frozen rows have the following limitations:

  • No vertical scrollbar inside the frozen section
  • No resource children (children of frozen rows are ignored)
  • No drag and drop row moving
  • No row selection
  • No links between events in the frozen and standard rows

Supported Features

  • Drag and drop between frozen and standard rows
  • Time range selection
  • Crosshair
  • Cell customization (onBeforeCellRender)
  • Row customization (onBeforeRowHeaderRender)

Demo