---
title: "Vue Timeline Variable Event Height Example | Mobiscroll"
component: "Timeline"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/timeline/variable-event-height"
---

# Variable Event Height - Vue Timeline demo

Show Vue Timeline events sized to content — resource rows grow to fit the tallest event, keeping text visible in room or resource schedules. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/timeline/variable-event-height)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/eventcalendar/timeline/variable-event-height)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/eventcalendar/timeline/variable-event-height)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/variable-event-height.md), [jQuery](https://demo.mobiscroll.com/jquery/timeline/variable-event-height.md), [Angular](https://demo.mobiscroll.com/angular/timeline/variable-event-height.md), [React](https://demo.mobiscroll.com/react/timeline/variable-event-height.md)

## Description

By default, events are equal in height and content is truncated by default where necessary. There are cases however where event height should match the content so that everything fits. To render events with variable height, use the `eventHeight: 'variable'` property under the [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) option's timeline configuration and the custom event templates: [`timelineEvent`](https://mobiscroll.com/docs/vue/eventcalendar/api#slot-timelineEvent) or [`timelineEventContent`](https://mobiscroll.com/docs/vue/eventcalendar/api#slot-timelineEventContent) . When the latter is used, to let the event container grow, the height of the inner content must be set to auto: `.mbsc-schedule-event-inner { height: auto }`. The height of the timeline events grow with the internal content, and the height of the resource rows adjust themselves to the events.

In the following example the height of the resource rows change dynamically based on the height of their events. Resources are the rooms where events are held and events have varying descriptions.

**Variable event height is an experimental feature.** [Learn more about it in the documentation →](https://mobiscroll.com/docs/vue/eventcalendar/timeline#variable-event-height)

## What this demo shows

- A desktop weekly timeline where days are arranged horizontally and resources are listed as rows on the left.
- **Header navigation** The month and year label opens date navigation, while the previous and next arrows move between weeks and the Today button returns to the current date.
- **Week view** The strip below the header shows the selected week from Sunday to Saturday, with the current date highlighted.
- **Time grid** The timeline displays hourly columns from 7 AM to 9 PM.
- **Resources** Multiple resources are shown as separate timeline rows.
- **Current time** A vertical blue line with a time label marks the current time.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event cards** Events appear as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed below the title.
- **Variable event height** Timeline events grow to fit their custom event content instead of forcing every event into the same fixed height.
- **Resource row height** Resource rows adjust dynamically based on the height of the events they contain.
- **Date positioning** Events are positioned by their assigned resource and exact date range.
- **Event interaction** Events highlight on hover and show drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** New events can be created by double-clicking the timeline or by clicking and dragging across a time range.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through time and resources.

## Best for

- **Room and hall schedules** Showing bookings where each event needs a title, time range, and longer description without cutting off important details.
- **Conference and session planning** Displaying sessions with variable-length descriptions across rooms, tracks, or venues.
- **Resource timelines with detailed notes** Presenting tasks, reservations, or appointments where some events need more explanatory text than others.
- **Operational schedules** Comparing events across resources while keeping longer instructions, agendas, or context visible directly in the timeline.
- **Content-sensitive event layouts** Building timelines where row height should follow the amount of event content instead of using a uniform fixed height.

## API used in this demo

- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources) - option
- [`dragToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToCreate) - option
- [`clickToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-clickToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToResize) - option
- [`dragInTime`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragInTime) - option

## Code

### SFC JS

```vue
<script setup>
import { getJson, MbscEventcalendar } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

const myEvents = ref([])

const myView = {
  timeline: {
    type: 'week',
    eventHeight: 'variable',
    startTime: '07:00',
    endTime: '21:00'
  }
}

const myResources = ref([
  {
    id: 1,
    name: 'Franklin Hall',
    color: '#e20000'
  },
  {
    id: 2,
    name: 'Jefferson Commons',
    color: '#76e083'
  },
  {
    id: 3,
    name: 'Lincoln Residence',
    color: '#4981d6'
  },
  {
    id: 4,
    name: 'Roosevelt House',
    color: '#e25dd2'
  },
  {
    id: 5,
    name: 'Adams Hall',
    color: '#f7961e'
  },
  {
    id: 6,
    name: 'Washington Tower',
    color: '#d6d145'
  }
])

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/events-variable-height/',
    (events) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscEventcalendar
    :view="myView"
    :data="myEvents"
    :resources="myResources"
    :dragToCreate="false"
    :clickToCreate="false"
    :dragToMove="true"
    :dragToResize="true"
    :dragInTime="true"
  >
    <template #timelineEventContent="event">
      <div class="mds-variable-event-height-title">{{ event.title }}</div>
      <div class="mds-variable-event-height-description">{{ event.original.description }}</div>
    </template>
  </MbscEventcalendar>
</template>

<style>
.mds-variable-event-height-title {
  white-space: normal;
  line-height: 16px;
  font-size: 15px;
  font-weight: 600;
}

.mds-variable-event-height-description {
  padding: 8px 0;
  white-space: normal;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}

.mds-variable-event-height .mbsc-schedule-event-range {
  font-size: 12px;
  font-weight: 600;
}

.mds-variable-event-height .mbsc-schedule-event-inner {
  padding: 1em;
}
</style>
```

### SFC TS

```vue
<script setup lang="ts">
import { getJson, MbscEventcalendar } from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView, MbscResource } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

const myEvents = ref<MbscCalendarEvent[]>([])

const myView: MbscEventcalendarView = {
  timeline: {
    type: 'week',
    eventHeight: 'variable',
    startTime: '07:00',
    endTime: '21:00'
  }
}

const myResources = ref<MbscResource[]>([
  {
    id: 1,
    name: 'Franklin Hall',
    color: '#e20000'
  },
  {
    id: 2,
    name: 'Jefferson Commons',
    color: '#76e083'
  },
  {
    id: 3,
    name: 'Lincoln Residence',
    color: '#4981d6'
  },
  {
    id: 4,
    name: 'Roosevelt House',
    color: '#e25dd2'
  },
  {
    id: 5,
    name: 'Adams Hall',
    color: '#f7961e'
  },
  {
    id: 6,
    name: 'Washington Tower',
    color: '#d6d145'
  }
])

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/events-variable-height/',
    (events: MbscCalendarEvent[]) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscEventcalendar
    :view="myView"
    :data="myEvents"
    :resources="myResources"
    :dragToCreate="false"
    :clickToCreate="false"
    :dragToMove="true"
    :dragToResize="true"
    :dragInTime="true"
  >
    <template #timelineEventContent="event">
      <div class="mds-variable-event-height-title">{{ event.title }}</div>
      <div class="mds-variable-event-height-description">{{ event.original.description }}</div>
    </template>
  </MbscEventcalendar>
</template>

<style>
.mds-variable-event-height-title {
  white-space: normal;
  line-height: 16px;
  font-size: 15px;
  font-weight: 600;
}

.mds-variable-event-height-description {
  padding: 8px 0;
  white-space: normal;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}

.mds-variable-event-height .mbsc-schedule-event-range {
  font-size: 12px;
  font-weight: 600;
}

.mds-variable-event-height .mbsc-schedule-event-inner {
  padding: 1em;
}
</style>
```

## Implementation notes

- Set `timeline: { type: 'week', eventHeight: 'variable', startTime: '07:00', endTime: '21:00' }`. The `eventHeight: 'variable'` option makes each resource row grow to fit the tallest event it contains instead of truncating content to a fixed height. This is an experimental feature.
- Use `renderTimelineEventContent` (Angular: `timelineEventContentTemplate`, Vue: `#timelineEventContent` slot) to render a custom two-element layout inside each event: a title div and a description div. Access the description via `event.original.description`. Using the content renderer (rather than the full event renderer `renderTimelineEvent`) is sufficient here - Mobiscroll handles the container height automatically when `eventHeight: 'variable'` is active.
- When rendering multi-line text inside `renderTimelineEventContent`, apply `white-space: normal` to text elements - this enables line wrapping, which drives the variable row height. Without it, text stays single-line and rows don't expand.
- Define 6 building/hall resources, each with `id`, `name`, and `color`. Load events remotely via `getJson` from a JSONP endpoint - the remote events carry varying `description` lengths, which is what makes the height difference between rows visually apparent.
- Disable drag-to-create and click-to-create (`dragToCreate: false`, `clickToCreate: false`). Enable drag-to-move, drag-to-resize, and drag-in-time so users can interact with events without accidentally creating new ones.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-vue.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config vue
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config vue --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/vue/getting-started/installation

## Related demos

- Previous: [Equal Row Heights](https://demo.mobiscroll.com/vue/timeline/timeline-resource-height.md) - Keep all resource rows the same height on Vue Timeline — overlapping events distribute evenly within uniform rows, with CSS override for min-height.
- Next: [Daily Event Listing](https://demo.mobiscroll.com/vue/timeline/event-listing.md) - Show events as full-day labels on a Vue Timeline — useful for spotting overloaded resources and managing schedules without an hourly time grid.