html5 javascript scheduler frozen 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


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";


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

JavaScript Scheduler

JavaScript Tutorials

JavaScript Demo

Angular Scheduler

Angular Tutorials

angular scheduler resource utilization workload chart

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.