---
title: "Javascript Timeline Resource Row Styling Example | Mobiscroll"
component: "Timeline"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/timeline/resource-background"
---

# Resource Row Styling - JavaScript Timeline demo

Highlight resource rows on a Javascript Timeline using background colors or CSS classes — differentiate teams, show status, or style headers and grid sections. Plain JS api for usage everywhere.

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

## Description

Easily highlight rows by adding a simple `background` color or craft a more specific look with the `cssClass` property of the [`resources data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-resources).

The output could be a custom background to individual rows and it can be used for multiple purposes. For example:

- Changing the background color for parent and child resources, like different color for different levels.
- Different styling for certain rows, like thicker border acting as separator.
- Resource selection, where the selected resource has a different background.
- Setting different backgrounds for the resource titles/grid rows/sidebar

**Interested in highlighting date ranges only?** [Explore this example →](https://demo.mobiscroll.com/javascript/timeline/colors-invalids-css-class)

## What this demo shows

- A desktop monthly 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 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.
- **Resource strip** Seven resources are displayed across the timeline. Resources C and F use the default appearance, while all other resources have customized backgrounds.
- **Resource background styles** Resource A uses a green background across the entire row. Resource B uses thicker borders to visually separate it from adjacent resources. Resource D customizes only the resource header background with an orange color. Resource E applies different background styles to the resource header, the all-day section, and the timeline grid independently. Resource G customizes only the timeline grid background.
- **Sidebar** Resource names are also rendered in a right-side sidebar.
- **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.
- **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

- **Highlighting resource states**: Indicate availability, maintenance, occupancy, priority, or other statuses using customized resource backgrounds.
- **Differentiating resources**: Visually separate teams, departments, meeting rooms, equipment, vehicles, or staff with resource-specific styling while preserving the standard scheduling experience.
- **Custom resource branding**: Apply independent styling to the resource header, all-day section, and timlne grid to match branding or emphasize contextual information.
- **Improving schedule readability**: Use background colors and custom CSS to make resource-heavy timelines easier to scan without modifying event data or scheduling behavior.

## API used in this demo

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

## Code

### JS

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

mobiscroll.eventcalendar('#demo-resource-background', {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  view: {
    timeline: {
      type: 'month',
    },
  },
  resources: [
    {
      id: 1,
      name: 'Resource A - Row background with "background" property',
      color: '#e20000',
      background: 'rgba(108, 166, 166, 0.37)',
    },
    {
      id: 2,
      name: 'Resource B - Thicker borders with "cssClass" property',
      color: '#1dab2f',
      cssClass: 'md-tick-border',
    },
    {
      id: 3,
      name: 'Resource C',
      color: '#4981d6',
    },
    {
      id: 4,
      name: 'Resource D - Resource background with "cssClass" property',
      color: '#e25dd2',
      cssClass: 'md-resource-only-bg',
    },
    {
      id: 5,
      name: 'Resource E - Different backgrounds with "cssClass" property',
      color: '#4981d6',
      cssClass: 'md-diff-custom-bg',
    },
    {
      id: 6,
      name: 'Resource F',
      color: '#d6d145',
    },
    {
      id: 7,
      name: 'Resource H - Grid background with "cssClass" property',
      color: '#34c8e0',
      cssClass: 'md-row-only-bg',
    },
  ],
  data: [
    {
      start: '2026-10-02T00:00',
      end: '2026-10-05T00:00',
      title: 'Event 1',
      resource: 1,
    },
    {
      start: '2026-10-10T09:00',
      end: '2026-10-15T15:00',
      title: 'Event 2',
      resource: 3,
    },
    {
      start: '2026-10-12T00:00',
      end: '2026-10-14T00:00',
      title: 'Event 3',
      resource: 4,
    },
    {
      start: '2026-10-15T07:00',
      end: '2026-10-20T12:00',
      title: 'Event 4',
      resource: 5,
    },
    {
      start: '2026-10-03T00:00',
      end: '2026-10-10T00:00',
      title: 'Event 5',
      resource: 6,
    },
    {
      start: '2026-10-10T08:00',
      end: '2026-10-11T20:00',
      title: 'Event 6',
      resource: 7,
    },
  ],
  renderSidebar: function (resource) {
    return '<div class="md-resource-bg-res-cont">' + resource.name + ' Sidebar</div>';
  },
});
```

### HTML

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

### CSS

```css
.md-diff-custom-bg.mbsc-timeline-row {
  background-image: radial-gradient(#ae8a8a 20%, transparent 20%);
  background-color: #f9f9f9;
  background-position:
    0 0,
    10px 10px;
  background-size: 20px 20px;
}

.md-diff-custom-bg.mbsc-timeline-resource {
  background: repeating-linear-gradient(-45deg, #fcfffc, #fcfffc 10px, #eefbec 10px, #eefbec 20px);
}

.md-diff-custom-bg.mbsc-timeline-sidebar-resource {
  opacity: 0.8;
  background-image: repeating-linear-gradient(45deg, #ffd6d6 25%, transparent 25%, transparent 75%, #ffd6d6 75%, #ffd6d6),
    repeating-linear-gradient(45deg, #ffd6d6 25%, #ffefef 25%, #ffefef 75%, #ffd6d6 75%, #ffd6d6);
  background-position:
    0 0,
    10px 10px;
  background-size: 20px 20px;
}

.md-tick-border {
  border-top: 2px solid currentColor;
  border-bottom-width: 3px;
}

.md-row-only-bg .mbsc-timeline-day {
  background: rgba(0, 128, 128, 0.8);
}

.md-resource-only-bg.mbsc-timeline-resource {
  background: rgba(255, 166, 0, 0.7);
}
```

## Implementation notes

- Use `timeline: { type: 'month' }` - a full-month view with one column per day.
- Define 7 resources, each demonstrating a different row-styling technique. Include a mix of resources with `background`, `cssClass`, and no extra styling to show the contrast.
- Add 6 events with `dyndatetime` offsets spread across the current month, each assigned to a different resource.
- Use `renderSidebar` (Angular: `sidebarTemplate`, Vue: `#sidebar` slot) to render the resource name with a " Sidebar" suffix for each row, so all three row zones (resource label, grid, sidebar) are visible and their background styling is apparent.
- **Two resource-level styling mechanisms:**
  - **`background` property**: set a CSS color value (e.g. `rgba(108, 166, 166, 0.37)`) directly on the resource object. Mobiscroll applies it as a background color spanning the full row - resource label column, grid area, and sidebar column.
  - **`cssClass` property**: Mobiscroll applies the class to each of the three row zone elements. To target only one zone, use a compound CSS selector combining the custom class with the relevant Mobiscroll internal class: `.mbsc-timeline-resource` (resource label column), `.mbsc-timeline-row` (grid area), or `.mbsc-timeline-sidebar-resource` (sidebar column). Without a zone sub-selector, the rule applies to the whole row container.

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

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

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

## Related demos

- Previous: [Theme Customization](https://demo.mobiscroll.com/javascript/timeline/themes-ios-material-windows.md) - Style the Javascript Timeline with iOS, Material, or Windows themes — switch light/dark variants, use the theme builder for colors, or apply CSS overrides.