---
title: "JQuery Timeline Resource Grouping & Hierarchy Example | Mobiscroll"
component: "Timeline"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/timeline/resource-grouping-hierarchy"
---

# Resource Grouping & Hierarchy - jQuery Timeline demo

Build a JQuery resource timeline with collapsible nested groups, pinned resources, and per-group event creation controls. For jQuery or jQuery Mobile.

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

## Description

Resources can be fixed to the top through the `fixed` property of the resource object. The fixed resources have to be placed before any other resource in the order of resources.

Resources can be placed into collapsible groups that can be collapsed or expanded on load through the `collapsed` property of the resource object. Parents have a slightly different styling compared to child elements that spans across the entire timeline. While the height of the rows are the same for all resources, these can be [customized with CSS](https://demo.mobiscroll.com/jquery/timeline/setting-row-height), the same way as seen in this example.

The hierarchy can be of multiple levels. Event creation, drag & drop is enabled for parent and child resources alike, that can be turned off through the `eventCreation` property of the [resource](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-resources) object.

The width of the resource column adjusts dynamically as resources are expanded or collapsed to fit their content. The default increment step can be modified with a CSS rule, without affecting the algorithm's behavior:

```css
.md-resource-grouping-hierarchy .mbsc-timeline-resource-depth-step {
            width: 20px;
            }
```

If the step adjustment is not needed and you want to keep the width of the resources column unchanged, you can disable it by setting the value to `width: 0;`.

## What this demo shows

- A desktop month timeline with days arranged horizontally and a hierarchical resource tree arranged vertically on the left.
- **Header navigation** The month and year label opens date navigation, while the previous and next arrows move between months and the Today button returns to the current date.
- **Month view** The strip below the header shows the days of the selected month, with the current date highlighted.
- **Resources** The left side shows expandable and collapsible resource groups, including parent groups and fixed resources at the top.
- **Resource hierarchy** Nested resources are grouped under parent rows, such as Group 1 and Group 2, before listing individual resources.
- **Fixed resources** Resource 1 and Resources 2 are fixed to the top through the fixed property of the resource object. The fixed resources have to be placed before any other resource in the order of resources.
- **Event cards** Events are displayed as colored cards with a left color stripe, a bold title, and the start and end time 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 across a time range.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through time and resources.

## Best for

- **Resource planning with hierarchy** Scheduling work across departments, teams, locations, or other nested resource structures.
- **Grouped operations schedules** Planning related resources under expandable parent groups while keeping the timeline readable.
- **Fixed priority resources** Keeping key resources, shared equipment, priority teams, or important rooms visible at the top while the rest of the resource list scrolls.
- **Long resource lists** Managing schedules where users need to move between many resources without losing the month-level timeline context.
- **Multi-level organization models** Representing resources that belong to several levels of grouping, such as region, site, team, and individual resource.

## 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
- [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) - 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
- [`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-grouping-hierarchy')
    .mobiscroll()
    .eventcalendar({
      view: {
        timeline: {
          type: 'month',
        },
      },
      clickToCreate: true,
      dragToCreate: true,
      dragToMove: true,
      dragToResize: true,
      data: [
        {
          start: '2026-10-02T00:00',
          end: '2026-10-05T00:00',
          title: 'Event 1',
          resource: 'res1',
        },
        {
          start: '2026-10-10T09:00',
          end: '2026-10-15T15:00',
          title: 'Event 2',
          resource: 'res3',
        },
        {
          start: '2026-10-05T00:00',
          end: '2026-10-09T00:00',
          title: 'Event 3',
          resource: 'res4',
        },
        {
          start: '2026-10-12T00:00',
          end: '2026-10-14T00:00',
          title: 'Event 4',
          resource: 'res4',
        },
        {
          start: '2026-10-15T07:00',
          end: '2026-10-20T12:00',
          title: 'Event 5',
          resource: 'res10',
        },
        {
          start: '2026-10-03T00:00',
          end: '2026-10-10T00:00',
          title: 'Event 6',
          resource: 'res11',
        },
        {
          start: '2026-10-10T08:00',
          end: '2026-10-11T20:00',
          title: 'Event 7',
          resource: 'res12',
        },
        {
          start: '2026-10-22T00:00',
          end: '2026-10-28T00:00',
          title: 'Event 8',
          resource: 'res12',
        },
        {
          start: '2026-10-08T00:00',
          end: '2026-10-13T00:00',
          title: 'Event 9',
          resource: 'res6',
        },
        {
          start: '2026-10-25T00:00',
          end: '2026-10-27T00:00',
          title: 'Event 10',
          resource: 'res6',
        },
        {
          start: '2026-10-20T00:00',
          end: '2026-10-23T00:00',
          title: 'Event 11',
          resource: 'res5',
        },
        {
          start: '2026-10-15T00:00',
          end: '2026-10-20T00:00',
          title: 'Event 12',
          resource: 'res7',
        },
        {
          start: '2026-10-21T00:00',
          end: '2026-10-26T00:00',
          title: 'Event 13',
          resource: 'res2',
        },
        {
          start: '2026-10-01T00:00',
          end: '2026-10-03T00:00',
          title: 'Event 14',
          resource: 'res14',
        },
        {
          start: '2026-10-10T00:00',
          end: '2026-10-14T00:00',
          title: 'Event 15',
          resource: 'res15',
        },
        {
          start: '2026-10-04T00:00',
          end: '2026-10-07T00:00',
          title: 'Event 16',
          resource: 'res16',
        },
        {
          start: '2026-10-18T00:00',
          end: '2026-10-20T00:00',
          title: 'Event 17',
          resource: 'res17',
        },
        {
          start: '2026-10-26T00:00',
          end: '2026-10-29T00:00',
          title: 'Event 18',
          resource: 'res18',
        },
      ],
      resources: [
        {
          id: 'res1',
          name: 'Resource 1',
          color: '#1dab2f',
          fixed: true,
        },
        {
          id: 'res2',
          name: 'Resource 2',
          color: '#76e083',
          fixed: true,
        },
        {
          id: 'res3',
          name: 'Resource 3',
          color: '#4981d6',
        },
        {
          id: 'gro1',
          name: 'Group 1',
          color: '#ff1717',
          eventCreation: false,
          children: [
            {
              id: 'res4',
              name: 'Resource 4',
              color: '#f7961e',
            },
            {
              id: 'res5',
              name: 'Resource 5',
              color: '#34c8e0',
            },
          ],
        },
        {
          id: 'gro2',
          name: 'Group 2',
          collapsed: true,
          eventCreation: false,
          children: [
            {
              id: 'res6',
              name: 'Resource 6',
              color: '#843100',
            },
            {
              id: 'gro3',
              name: 'Group 3',
              color: '#af0000',
              collapsed: true,
              eventCreation: false,
              children: [
                {
                  id: 'res7',
                  name: 'Resource 7',
                  color: '#4caf00',
                },
                {
                  id: 'res8',
                  name: 'Resource 8',
                  color: '#7056ff',
                },
                {
                  id: 'gro4',
                  name: 'Group 4',
                  collapsed: true,
                  eventCreation: false,
                  children: [
                    {
                      id: 'res9',
                      name: 'Resource 9',
                      color: '#4caf00',
                    },
                    {
                      id: 'gro5',
                      name: 'Group 5',
                      collapsed: true,
                      eventCreation: false,
                      children: [
                        {
                          id: 'res10',
                          name: 'Resource 10',
                          color: '#e20000',
                        },
                        {
                          id: 'res11',
                          name: 'Resource 11',
                          color: '#d6d145',
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          id: 'res12',
          name: 'Resource 12',
          color: '#e25dd2',
        },
        {
          id: 'res13',
          name: 'Resource 13',
          color: '#7056ff',
        },
        {
          id: 'res14',
          name: 'Resource 14',
          color: '#56aaff',
        },
        {
          id: 'res15',
          name: 'Resource 15',
          color: '#56ff89',
        },
        {
          id: 'res16',
          name: 'Resource 16',
          color: '#ff6e56',
        },
        {
          id: 'res17',
          name: 'Resource 17',
          color: '#ffd756',
        },
        {
          id: 'res18',
          name: 'Resource 18',
          color: '#8b56ff',
        },
        {
          id: 'res19',
          name: 'Resource 19',
          color: '#56d9ff',
        },
      ],
    });
});
```

### HTML

```html
<div id="demo-resource-grouping-hierarchy" class="md-resource-grouping-hierarchy"></div>
```

### CSS

```css
.md-resource-grouping-hierarchy .mbsc-timeline-parent {
    height: 34px;
}
```

## Implementation notes

- Use `timeline: { type: 'month' }` - a full-month view.
- Enable all interactions: `clickToCreate: true`, `dragToCreate: true`, `dragToMove: true`, `dragToResize: true`.
- Define resources with a multi-level nested hierarchy using the `children` array on parent resource objects. Groups carry `eventCreation: false` so only leaf (child) resources receive events - clicking or dragging onto a group header row does nothing. The demo structure has up to 5 levels of nesting:
  - **Fixed resources** (pinned to top): Resource 1 (`fixed: true`) and Resource 2 (`fixed: true`). Fixed resources must be placed at the beginning of the resource array, before all other resources and groups.
  - Resource 3 - standalone, no group
  - Group 1 (`eventCreation: false`): children Resource 4, Resource 5. Expanded on load (no `collapsed` property).
  - Group 2 (`eventCreation: false`, `collapsed: true`): children Resource 6 and Group 3. Collapsed on load.
    - Group 3 (`eventCreation: false`, `collapsed: true`): children Resource 7, Resource 8, Group 4.
      - Group 4 (`eventCreation: false`, `collapsed: true`): children Resource 9 and Group 5.
        - Group 5 (`eventCreation: false`, `collapsed: true`): children Resource 10, Resource 11.
  - Resources 12-19 - standalone resources after the groups.
- Add 18 events with `dyndatetime` offsets distributed across the current month, each assigned to a leaf resource `id`.
- The resource column width expands and contracts automatically as groups are collapsed or expanded to accommodate the indentation depth. The default indentation step can be overridden by targeting Mobiscroll's internal `.mbsc-timeline-resource-depth-step` class; set the width to `0` to disable dynamic column width adjustment entirely.

## 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: [Resource Footers & Revenue Sidebar](https://demo.mobiscroll.com/jquery/timeline/timeline-resource-details-side-panel-footer.md) - Add custom resource column footers, a revenue sidebar, and per-day occupancy to a JQuery resource timeline — all column headers are sortable.
- Next: [Resource Group Aggregate Summaries](https://demo.mobiscroll.com/jquery/timeline/show-summaries-aggregates-for-resource-groups.md) - Show aggregate totals in parent resource rows on a JQuery Timeline — summary values recalculate as bookings are added, changed, or removed.