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)
Row filtering (since 2023.1.5544)
JavaScript Scheduler
JavaScript Tutorials
JavaScript 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.