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
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.