---
title: "JQuery Timeline Equal Row Heights Example | Mobiscroll"
component: "Timeline"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/timeline/timeline-resource-height"
---

# Equal Row Heights - jQuery Timeline demo

Keep all resource rows the same height on JQuery Timeline — overlapping events distribute evenly within uniform rows, with CSS override for min-height.

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

## Description

By default the height of the timeline tracks will adjust to accommodate the events inside. However, in some cases it is desired that the track heights remain equal, and distribute the overlapping events evenly inside the track. This can be achieved by using the `rowHeight: 'equal'` property under the `timeline` configuration of the [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) option.

The height of the timeline tracks have a minimum height of 52px. This means that regardless of the available vertical space the height of the timeline rows never shrinks below that number.

If there is more vertical space available the rows automatically grow to fill it. *Eg. if the parent container is 250px and there are only two resources, their height will grow to fill the full height minus the calendar header.*

This can however be overridden with a custom CSS rule:

```css
.md-timeline-height .mbsc-timeline-resource,
            .md-timeline-height .mbsc-timeline-row {
            min-height: 120px;
            }
```

## What this demo shows

- A desktop weekly timeline layout with days arranged horizontally and resources arranged vertically on the left.
- **Header navigation** The month and year label opens date navigation, while the previous and next arrows and the Today button move the timeline between weeks or back to the current day.
- **Week view** The fixed 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 12 AM to 9 PM.
- **Resources** Five resources are shown as individual rows on the left side of the timeline.
- **Equal row height** Resource rows keep the same height instead of expanding independently based on the number of events inside each row.
- **Overlapping events** Overlapping events are distributed within the equal-height resource row.
- **Minimum row height** Timeline rows keep a minimum height of 52px, so they do not shrink below the default minimum even when vertical space is limited.
- **Available space** When more vertical space is available, resource rows grow to fill the available height below the calendar header.
- **Custom row height** The default minimum row height can be overridden with a custom CSS rule targeting the timeline resource and row elements.
- **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 left color stripe, a bold title, and the time range below the title.
- **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 on it.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through time and resources.

## Best for

- **Consistent resource comparison** Keeping resource rows visually aligned when users need to compare availability, workload, or bookings across resources.
- **Room and equipment planning** Managing room, venue, vehicle, equipment, or asset schedules where each resource should have the same visual weight.
- **Operations dashboards** Building timeline views that need stable row heights for scanning, monitoring, or reviewing resource usage.
- **Custom layout control** Applying a fixed or larger minimum row height with CSS when the default timeline row sizing does not match the surrounding page layout.

## API used in this demo

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

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

$(function () {
  $('#demo-resource-height')
    .mobiscroll()
    .eventcalendar({
      clickToCreate: true,
      dragToCreate: true,
      dragToMove: true,
      dragToResize: true,
      eventDelete: true,
      view: {
        timeline: {
          rowHeight: 'equal',
          type: 'week',
          timeCellStep: 240,
          timeLabelStep: 240,
        },
      },
      data: [
        {
          start: '2026-10-24T04:00',
          end: '2026-10-24T22:00',
          title: 'Event1',
          resource: 1,
        },
        {
          start: '2026-10-24T05:00',
          end: '2026-10-24T18:00',
          title: 'Event2',
          resource: 1,
        },
        {
          start: '2026-10-24T08:00',
          end: '2026-10-24T23:59',
          title: 'Event3',
          resource: 1,
        },
        {
          start: '2026-10-25T05:00',
          end: '2026-10-25T20:00',
          title: 'Event4',
          resource: 2,
        },
        {
          start: '2026-10-25T08:00',
          end: '2026-10-25T22:00',
          title: 'Event5',
          resource: 2,
        },
        {
          start: '2026-10-26T02:00',
          end: '2026-10-26T16:00',
          title: 'Event6',
          resource: 4,
        },
        {
          start: '2026-10-26T04:00',
          end: '2026-10-26T20:00',
          title: 'Event7',
          resource: 4,
        },
        {
          start: '2026-10-26T06:00',
          end: '2026-10-26T17:00',
          title: 'Event8',
          resource: 4,
        },
        {
          start: '2026-10-26T09:00',
          end: '2026-10-26T23:00',
          title: 'Event9',
          resource: 4,
        },
      ],
      resources: [
        {
          id: 1,
          name: 'Flatiron Room',
          color: '#fdf500',
        },
        {
          id: 2,
          name: 'The Capital City',
          color: '#ff0101',
        },
        {
          id: 3,
          name: 'Heroes Square',
          color: '#01adff',
        },
        {
          id: 4,
          name: 'Thunderdome',
          color: '#239a21',
        },
        {
          id: 5,
          name: 'King’s Landing',
          color: '#ff4600',
        },
      ],
    });
});
```

### HTML

```html
<div id="demo-resource-height" class="md-timeline-height"></div>
```

### CSS

```css

.md-timeline-height .mbsc-timeline-resource,
.md-timeline-height .mbsc-timeline-row {
    min-height: 120px;
}
```

## Implementation notes

- Set `timeline: { rowHeight: 'equal', type: 'week', timeCellStep: 240, timeLabelStep: 240 }`. The `rowHeight: 'equal'` option locks all resource rows to the same height; overlapping events are stacked within that fixed space instead of expanding the row. `timeCellStep: 240` / `timeLabelStep: 240` produces 4-hour-wide columns.
- Use `cssClass` to apply a custom class to the calendar, then override the default minimum row height by targeting `.mbsc-timeline-resource` (resource label column) and `.mbsc-timeline-row` (event track area) with a custom `min-height` value.
- Define 5 venue/room resources. Leave some resources without any events so the demo shows that equal-height rows also apply to empty rows, not only to rows with overlapping events.
- Place varying numbers of overlapping timed events on different resources (e.g. 3 overlaps on resource 1 today, 2 on resource 2 tomorrow, 4 on resource 4 two days from now) to make the equal-height constraint visually obvious across rows with different event densities. Use relative date offsets for today/today+1/today+2.

## 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-jquery.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 jquery
   ```

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 jquery --trial`.

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

## Related demos

- Previous: [Custom Event Ordering](https://demo.mobiscroll.com/jquery/timeline/custom-event-sort.md) - Set event order in JQuery Timeline rows via per-event order value or a custom ordering function — useful for priority-based and dense weekly schedules.
- Next: [Variable Event Height](https://demo.mobiscroll.com/jquery/timeline/variable-event-height.md) - Show JQuery Timeline events sized to content — resource rows grow to fit the tallest event, keeping text visible in room or resource schedules.