Javascript Timeline Resource Row Styling Example

Easily highlight rows by adding a simple background color or craft a more specific look with the cssClass property of the resources data.

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 →

Download and try example

Preview in full screen

Highlight resource rows on a Timeline using background colors or CSS classes — differentiate teams, show status, or style headers and grid sections.

mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

mobiscroll.eventcalendar('#demo-resource-background', {
  clickToCreate:  ,
  dragToCreate:  ,
  dragToMove:  ,
  dragToResize:  ,
  eventDelete:  ,
  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>';
  },
});

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

.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);
}

Resource Row Styling

Duplicate Session

Duplicate Session

Demo

Code

Duplicate Session

Duplicate Session