New to Kendo UI for Vue? Start a free 30-day trial

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:

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

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

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

The following example demonstrates constant item height in action:

Example
View Source
Change Theme:
{% endvariant %}

In this article

Not finding the help you need?