---
title: "Vue Scheduler Resource Background Styling Example | Mobiscroll"
component: "Scheduler"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/scheduler/resource-background"
---

# Resource Background Styling - Vue Scheduler demo

Color-code resources in a Vue Scheduler with custom backgrounds and CSS classes — style headers, all-day areas, and grid columns per resource. For Vue and Nuxt.

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

## Description

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

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

- Different styling for certain columns, like thicker border acting as separator.
- Resource selection, where the selected resource has a different background.
- Setting different backgrounds for the resource titles and grid columns.

**Interested in highlighting date ranges only?** [Explore this example →](https://demo.mobiscroll.com/vue/scheduler/colored-cell-background)

## What this demo shows

- A desktop daily scheduler with date navigation, multiple resources, and a vertically scrollable time grid for the selected day.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between days and jump back to the current day.
- **Day header** The short weekday name and the selected date are shown below the main navigation.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Resource strip** Seven resources are displayed across the scheduler. 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 column. 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 scheduler grid independently. Resource G customizes only the scheduler grid background.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected day.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **Current time** A horizontal blue line marks the current time across the scheduler.
- **Hover feedback** Hovering over the time grid shows a time indicator that follows the pointer in 15-minute increments.
- **Timed events** Events are displayed as colored cards with a colored left stripe, the event title, and the exact start and end time.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles when the event allows those interactions.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.

## 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 scheduler grid to match branding or emphasize contextual information.
- **Improving schedule readability**: Use background colors and custom CSS to make resource-heavy schedulers easier to scan without modifying event data or scheduling behavior.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-themeVariant) - option
- [`cssClass`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-cssClass) - option
- [`clickToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-eventDelete) - option
- [`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
- [`groupBy`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-groupBy) - option

## Code

### SFC JS

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

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const myResources = ref([
  {
    id: 1,
    name: 'Resource - Full column background with "background" property',
    color: '#e20000',
    background: 'rgba(71, 251, 34, 0.37)'
  },
  {
    id: 2,
    name: 'Resource B  - Thicker borders - with "cssClass" property',
    color: '#1dab2f',
    cssClass: 'md-col-tick-border'
  },
  {
    id: 3,
    name: 'Resource C',
    color: '#4981d6'
  },
  {
    id: 4,
    name: 'Resource D - Resource only 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 G - Grid only background with "cssClass" property',
    color: '#34c8e0',
    cssClass: 'md-colum-only-bg'
  }
])

const myEvents = ref([
  {
    start: '2026-10-22T08:00',
    end: '2026-10-22T10:00',
    title: 'Event 1',
    resource: 1
  },
  {
    start: '2026-10-22T09:00',
    end: '2026-10-22T15:00',
    title: 'Event 2',
    resource: 3
  },
  {
    start: '2026-10-22T14:00',
    end: '2026-10-22T21:00',
    title: 'Event 3',
    resource: 4
  },
  {
    start: '2026-10-22T07:00',
    end: '2026-10-22T12:00',
    title: 'Event 4',
    resource: 5
  },
  {
    start: '2026-10-22T11:00',
    end: '2026-10-22T20:00',
    title: 'Event 6',
    resource: 6
  },
  {
    start: '2026-10-22T04:00',
    end: '2026-10-22T10:00',
    title: 'Event 7',
    resource: 2
  },
  {
    start: '2026-10-22T15:00',
    end: '2026-10-22T18:00',
    title: 'Event 8',
    resource: 7
  },
  {
    start: '2026-10-22T12:00',
    end: '2026-10-22T14:00',
    title: 'Event 9',
    resource: 4
  },
  {
    start: '2026-10-22T10:00',
    end: '2026-10-22T12:00',
    title: 'Event 10',
    resource: 2
  }
])

const myView = {
  scheduler: { type: 'day' }
}
</script>

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :view="myView" :data="myEvents" :resources="myResources" groupBy="date" />
</template>

<style>
.md-diff-custom-bg.mbsc-schedule-header-item,
.md-diff-custom-bg.mbsc-schedule-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-diff-custom-bg.mbsc-schedule-column {
  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-schedule-all-day-item {
  background: repeating-linear-gradient(-45deg, #fcfffc, #fcfffc 10px, #eefbec 10px, #eefbec 20px);
}

.md-col-tick-border.mbsc-schedule-all-day-item,
.md-col-tick-border.mbsc-schedule-column,
.md-col-tick-border.mbsc-schedule-resource.mbsc-schedule-col-width {
  border-left: 4px solid #ccc;
  border-right: 3px solid #ccc;
}

.md-col-tick-border.mbsc-schedule-all-day-item::after {
  border-right: 4px solid #ccc;
}

.md-colum-only-bg.mbsc-schedule-column {
  background: rgba(0, 128, 128, 0.8);
}

.md-resource-only-bg.mbsc-schedule-resource {
  background: rgba(255, 166, 0, 0.7);
}
</style>
```

### SFC TS

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

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const myResources: MbscResource[] = [
  {
    id: 1,
    name: 'Resource - Full column background with "background" property',
    color: '#e20000',
    background: 'rgba(71, 251, 34, 0.37)'
  },
  {
    id: 2,
    name: 'Resource B - Thicker borders with "cssClass" property',
    color: '#1dab2f',
    cssClass: 'md-col-tick-border'
  },
  {
    id: 3,
    name: 'Resource C',
    color: '#4981d6'
  },
  {
    id: 4,
    name: 'Resource D - Resource only 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 G - Grid only background with "cssClass" property',
    color: '#34c8e0',
    cssClass: 'md-colum-only-bg'
  }
]

const myEvents: MbscCalendarEvent[] = [
  {
    start: '2026-10-22T08:00',
    end: '2026-10-22T10:00',
    title: 'Event 1',
    resource: 1
  },
  {
    start: '2026-10-22T09:00',
    end: '2026-10-22T15:00',
    title: 'Event 2',
    resource: 3
  },
  {
    start: '2026-10-22T14:00',
    end: '2026-10-22T21:00',
    title: 'Event 3',
    resource: 4
  },
  {
    start: '2026-10-22T07:00',
    end: '2026-10-22T12:00',
    title: 'Event 4',
    resource: 5
  },
  {
    start: '2026-10-22T11:00',
    end: '2026-10-22T20:00',
    title: 'Event 6',
    resource: 6
  },
  {
    start: '2026-10-22T04:00',
    end: '2026-10-22T10:00',
    title: 'Event 7',
    resource: 2
  },
  {
    start: '2026-10-22T15:00',
    end: '2026-10-22T18:00',
    title: 'Event 8',
    resource: 7
  },
  {
    start: '2026-10-22T12:00',
    end: '2026-10-22T14:00',
    title: 'Event 9',
    resource: 4
  },
  {
    start: '2026-10-22T10:00',
    end: '2026-10-22T12:00',
    title: 'Event 10',
    resource: 2
  }
]

const myView: MbscEventcalendarView = {
  scheduler: { type: 'day' }
}
</script>

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :view="myView" :data="myEvents" :resources="myResources" groupBy="date" />
</template>

<style>
.md-diff-custom-bg.mbsc-schedule-header-item,
.md-diff-custom-bg.mbsc-schedule-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-diff-custom-bg.mbsc-schedule-column {
  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-schedule-all-day-item {
  background: repeating-linear-gradient(-45deg, #fcfffc, #fcfffc 10px, #eefbec 10px, #eefbec 20px);
}

.md-col-tick-border.mbsc-schedule-all-day-item,
.md-col-tick-border.mbsc-schedule-column,
.md-col-tick-border.mbsc-schedule-resource.mbsc-schedule-col-width {
  border-left: 4px solid #ccc;
  border-right: 3px solid #ccc;
}

.md-col-tick-border.mbsc-schedule-all-day-item::after {
  border-right: 4px solid #ccc;
}

.md-colum-only-bg.mbsc-schedule-column {
  background: rgba(0, 128, 128, 0.8);
}

.md-resource-only-bg.mbsc-schedule-resource {
  background: rgba(255, 166, 0, 0.7);
}
</style>
```

## Implementation notes

- Use `view: { scheduler: { type: 'day' } }` with `groupBy: 'date'`. Resources appear as columns; time slots run vertically.
- Define 7 resources and 10 events inline using `dyndatetime` offsets. Resources C and F carry only `id`, `name`, and `color` with no special styling.
- **`background` property** (Resource A): set a CSS color string directly on the resource object - `background: 'rgba(71, 251, 34, 0.37)'`. Mobiscroll spans this color across the full resource column in the grid.
- **`cssClass` property**: use compound selectors combining the custom class with Mobiscroll's zone classes to target specific areas of a resource column:
  - `.mbsc-schedule-resource` - resource label cell only (leaves the grid column unaffected)
  - `.mbsc-schedule-column` - grid time-slot column only (leaves the label unaffected)
  - `.mbsc-schedule-all-day-item` - the all-day row cell for the resource
  - `.mbsc-schedule-resource.mbsc-schedule-col-width` - label including its width-defining element (used for border rules)
  - Combining multiple zone selectors in one CSS rule (`md-diff-custom-bg`) lets each zone carry a distinct background pattern independently.

## 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: [Themes — iOS, Material & Windows](https://demo.mobiscroll.com/vue/scheduler/themes-ios-material-windows.md) - Preview iOS, Material, and Windows themes on the Vue Scheduler — toggle light/dark mode, customize colors with the theme builder, or use CSS overrides.
- Next: [Cell Hover Summary Tooltip](https://demo.mobiscroll.com/vue/scheduler/show-cell-summary-on-hover.md) - Show a per-cell summary tooltip in the Vue Scheduler — hover over any schedule cell to display event count, invalid slots, and color ranges.