Auto Item Height

Premium

The KendoReact SchedulerViewSlot can automatically extend depending on the content inside it, or take a predefined height.

This feature is available in horizontal configuration of the events, which can be observed in the following views:

• TimelineView
• DayView— only in the allDay section.
• Week— only in the allDay section.
• WorkWeek— only in the allDay section.
• MonthView

This feature is compatible with the Adaptive Slot Height of the SchedulerViewSlot.

In order to set enable the auto item height functionality, set the style.height property of the SchedulerViewItem to auto:

jsx

const AutoHeightViewItem = (props) => {
    return (
        <SchedulerViewItem
            {...props}
            style={{
                ...props.style,
                height: 'auto'
            }}
        />
    );
};

The following example demonstrates the auto item height feature in action:

Change Theme

Theme

Loading ...

Constant Item Height

In order to set a constant height of an item, set its style.height to a numeric value, representing the height in pixels:

jsx

const AutoHeightViewItem = (props) => {
    return (
        <SchedulerViewItem
            {...props}
            style={{
                ...props.style,
                height: 45
            }}
        />
    );
};

The following example demonstrates constant item height in action:

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the Scheduler
• Scheduler Slot Customization
• Scheduler Item Customization
• Adaptive Slot Height
• KendoReact Scheduler