[REACT] How to Make Week/Day View Fill Entire Vertical Space When Using Custom dayStartTime and dayEndTime?

[pragati.sharma]

We are using Bryntum Calendar in our project and have implemented dynamic time ranges for week and day views using the dayStartTime and dayEndTime configs.
Requirement:
When our time range is narrow (for example, just 08:00–10:00), we want the visible hour slots to stretch and fill the entire vertical height of the calendar.
Issue:
Currently, the time slots for the configured range appear only at the top of the calendar, with the rest of the container being empty white space.
Question:
Is there a built-in way or recommended approach in Bryntum Calendar to make the hour slots for the visible range automatically stretch to fill the entire vertical space of the container?

[marcio]

Hey pragati.sharma,

Thanks for reaching out.

To achieve the desired behavior where the visible hour slots stretch to fill the entire vertical space of the calendar, you can use the fitHours config in the DayView or WeekView. Setting fitHours to true will adjust the hour slots to fit the available height of the calendar view.

Here's an example of how you can configure it:

const calendar = new Calendar({
    modes : {
        day : {
            fitHours : true,
            dayStartTime : '08:00',
            dayEndTime : '10:00'
        },
        week : {
            fitHours : true,
            dayStartTime : '08:00',
            dayEndTime : '10:00'
        }
    }
});

This should make the hour slots stretch to fill the entire vertical space when the time range is narrow.