Auto Item Height

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:

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

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

Example
View Source
Change Theme:

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:

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

The following example demonstrates constant item height in action:

Example
View Source
Change Theme:

In this article

Not finding the help you need?