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

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

• Shift-based row-range selection is limited to ordinary rows. Basic row selection is supported in frozen rows.

• 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)

• Row filtering (since 2023.1.5544)

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

• ASP.NET Core Hotel Room Booking App

• ASP.NET Core Restaurant Table Reservation App

JavaScript Demo

• Frozen Rows Demo

API: heightSpec, height.

The examples keep Priority room at the top of a fixed-height Scheduler while the other resource rows scroll beneath it.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Priority room", frozen: "top"}, {id: "B", name: "Room B"}, ...Array.from({length: 30}, (_, i) => ({id: "R" + i, name: "Room " + (i + 1)}))],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    heightSpec: "Fixed",
    height: 300
  };

}

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.

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Priority room", frozen: "top"}, {id: "B", name: "Room B"}, ...Array.from({length: 30}, (_, i) => ({id: "R" + i, name: "Room " + (i + 1)}))]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      heightSpec={"Fixed"}
      height={300}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Priority room", frozen: "top"}, {id: "B", name: "Room B"}, ...Array.from({length: 30}, (_, i) => ({id: "R" + i, name: "Room " + (i + 1)}))];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const heightSpec = "Fixed";
const height = 300;

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :heightSpec="heightSpec"
      :height="height"
    />
  </div>
</template>

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.