DayPilotThe grid cells in the JavaScript Scheduler can show more than empty time. Their layout, content, working-time status and available interactions can reflect each resource's schedule, holidays, maintenance or capacity.
Set the cell layout
A fixed cell width gives each time interval a predictable amount of space. Automatic cell width fills the available grid width, with a configurable minimum that preserves readable cells and introduces scrolling when the timeline cannot fit.
Cell and row height follow the event height and the space needed to display events in the row. The grid can therefore accommodate overlapping bookings while keeping resource and time information aligned.
Customize individual cells
Cell customization covers background colors and images, text or HTML, CSS classes and business/non-business status. The rendering callback exposes the cell's dates and resource, so different rows can display different availability information for the same time interval.
Maintenance dates can carry a label and a distinct background; a price or availability value can appear directly in the cell. The customization is driven by application data rather than a single fixed holiday calendar.
Show working time and availability
Business-hour settings describe the normal working pattern. Custom cell rules add resource-specific exceptions such as holidays or maintenance, alongside weekend highlighting and highlighting today.
Appearance and interaction are separate: a shaded cell can remain bookable, while a disabled cell blocks selection and drag-and-drop changes. Validation can apply the same availability rules to proposed bookings.
Display utilization, details and controls
The utilization helper calculates peak overlapping consumption from event data. A cell can present that value as a number, percentage or bar against the capacity supplied by the application.
A cell bubble shows extended details on hover. Cell active areas add icons or actions, and framework rendering supports React JSX, Vue slots and Pro Angular templates inside cells.