Auto Item Height

The Kendo UI for Vue 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 itemStyle.height property of the SchedulerViewItem to auto:

js

<template #itemRender="{ props }">
      <SchedulerViewItem
        v-bind="props"
        :itemStyle="{
          height: 'auto',
        }"
      />
</template>

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 itemStyle.height to a specifix value, representing the height:

js

<template #itemRender="{ props }">
      <SchedulerViewItem
        v-bind="props"
        :itemStyle="{
          height: '45px',
        }"
      />
</template>

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