Frozen/Sticky Rows

The JavaScript Scheduler component 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 the 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

When working with the DayPilot.Row object, you can access the grid name using DayPilot.Row.grid property ("top" | "bottom" | "main").

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

Identification of Cells in Frozen Rows

In onBeforeCellRender event handler, you can access the grid name using Cell.grid property ("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)

JavaScript Scheduler

JavaScript Tutorials

• JavaScript Scheduler: Use Frozen Rows to Select Time Columns
• JavaScript Scheduler: Column Summary and Availability Chart
• JavaScript Scheduler: How to Unschedule Events

JavaScript Demo

• Frozen Rows Demo

Angular Scheduler

Angular Tutorials

The Angular Scheduler: Resource Utilization Chart tutorial shows how to calculate resource utilization percentage for time slots and show a bar chart (a histogram) in a fixed row displayed at the top of the Angular Scheduler component.

Vue Scheduler

Vue Tutorials

The Vue Scheduler: Availability/Utilization Histogram tutorial shows how to add frozen rows to the top of the Vue Scheduler component and display a histogram with utilization and availability information there.