Overview
Explore the ways to show details for time slots in the the React Scheduler component (DayPilot Pro for JavaScript).
License
Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript.
What information can be displayed in React Scheduler slots?
When designing a scheduling or reservation application, you may want to display additional information related to the time slots.
You can display slot-specific information in the grid cells of the React Scheduler component:
work days or work hours
either global or resource-specific holidays
availability summary for a time slot or a group of resources
past time slots
slot-specific price (like in the tennis court reservation tutorial)
How to display time slot details in the Scheduler?
The Scheduler component displays two layers in the main scheduling grid:
background layout with cells (time slots)
top layers with events (tasks, reservations)
The standard way is to use the background layer (the cells) to display the slot-specific information. However, that information must be written to each cell individually. Sometimes, you might want to add longer text that spans multiple cells. In this tutorial, you will learn how to move events to the background layer and use them to display a larger blocks.
How to modify the Scheduler grid cells?
You can use onBeforeCellRender event handler to customize the React Scheduler cells. In addition to setting custom content in HTML format, you can also modify the cell background color, add active areas and make the cell unavailable by marking it as blocked.
How to display a Scheduler event in the background?
In order to display an event in the background, you need to mark it as non-blocking using nonBlocking property of the data source item:
this.setState({
events: [
{
id: 101,
text: "Non-blocking background event",
start: "2021-05-02T00:00:00",
end: "2021-05-15T00:00:00",
resource: "A",
barHidden: true,
backColor: "#dddddd",
borderColor: "darker",
nonBlocking: true,
line: 0,
height: 50
},
// ...
]
});
At this moment, the property must be present in the data source and it can’t be added later using onBeforeEventRender (unlike most other event properties). The nonBlocking property is available since version 2021.2.5007 of the DayPilot Pro for JavaScript package.
The nonBlocking property ensures that the space occupied by the event is treated as a free space when arranging the events within a row. However, when the Scheduler looks for a free place for this event, it respects the existing events. If you want to display it at the top of the row (line 0), it’s necessary to specify the row number explicitly:
line: 0For more information about how the Scheduler arranges events inside a row, please see the JavaScript Scheduler: Event Placement Strategies tutorial.
