---
title: "Vue Timeline Custom Time Range Backgrounds Example | Mobiscroll"
component: "Timeline"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/timeline/colors-invalids-css-class"
---

# Custom Time Range Backgrounds - Vue Timeline demo

Style time range backgrounds and blocked periods on a Vue Timeline using CSS classes — mark recurring hours or special days. For Vue and Nuxt.

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

## Description

Besides [customizing the background color](https://demo.mobiscroll.com/vue/scheduler/colored-cell-background) of cells and [setting up invalid/blocked out times](https://demo.mobiscroll.com/vue/scheduler/time-off-blocked-ranges) you can customize how these blocks and disabled times look by passing a `cssClass` to the [`colors`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-colors) and [`invalid`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-invalid) array elements.

The output could be a custom pattern, custom styling for the labels or anything that you'd like to render as the background. This a great way for adding special meaning to certain days and time ranges.

## What this demo shows

- A desktop weekly 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 weeks and the Today button returns to the current date.
- **Week view** The strip below the header shows the selected week from Monday to Friday, with the current date highlighted.
- **Time grid** The timeline displays hourly columns from 9 AM to 6 PM.
- **Resources** Multiple resources are shown as separate timeline rows.
- **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.
- **Colored time ranges** Predefined customized backgrounds mark specific time grid cells without blocking event labels where the colors option is customized with css. 
- **Lunch marker** Weekdays from Monday to Friday show a grey and white background from 12 PM to 1 PM, with a Lunch break title in the center of the marked cell and these time periods are disabled so the invalid option is customized with css.
- **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 and time 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

- **Recurring marked hours** Highlighting repeated time ranges such as lunch breaks, maintenance windows, or blocked working hours in a weekly timline.
- **Special dates and observances** Marking public holidays, company observances, or other notable dates directly in the timeline background.
- **Timeline overview screens** Adding background cues that help people scan important hours while keeping event cards visible and readable.
- **Availability context** Showing non-event time markers alongside scheduled events without turning those markers into regular event cards.

## 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
- [`invalid`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-invalid) - option
- [`colors`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-colors) - option

## Code

### SFC JS

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

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

const myEvents = ref([])

const myInvalid = [
  {
    start: '12:00',
    end: '13:00',
    title: 'Lunch break',
    recurring: {
      repeat: 'weekly',
      weekDays: 'MO,TU,WE,TH,FR'
    },
    cssClass: 'md-lunch-break-class mbsc-flex'
  }
]

const myColors = [
  {
    resource: 2,
    start: '09:00',
    end: '11:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'MO'
    },
    cssClass: 'md-rect-bg'
  },
  {
    resource: 1,
    start: '10:00',
    end: '12:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'WE'
    },
    cssClass: 'md-rect-bg'
  },
  {
    resource: 3,
    start: '14:00',
    end: '17:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'TH'
    },
    cssClass: 'md-rect-bg'
  },
  {
    resource: 4,
    start: '13:00',
    end: '18:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'MO'
    },
    cssClass: 'md-rect-bg'
  },
  {
    resource: 1,
    start: '09:00',
    end: '12:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'FR'
    },
    cssClass: 'md-stripes-bg'
  },
  {
    resource: 3,
    start: '09:00',
    end: '12:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'TU'
    },
    cssClass: 'md-stripes-bg'
  },
  {
    resource: 5,
    start: '10:00',
    end: '12:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'MO'
    },
    cssClass: 'md-stripes-bg'
  },
  {
    resource: 5,
    start: '13:00',
    end: '17:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'TU'
    },
    cssClass: 'md-stripes-bg'
  },
  {
    resource: 1,
    start: '09:00',
    end: '12:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'TH'
    },
    cssClass: 'md-dots-bg'
  },
  {
    resource: 2,
    start: '06:00',
    end: '12:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'TU'
    },
    cssClass: 'md-dots-bg'
  },
  {
    resource: 4,
    start: '15:00',
    end: '17:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'FR'
    },
    cssClass: 'md-dots-bg'
  },
  {
    resource: 4,
    start: '14:00',
    end: '18:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'WE'
    },
    cssClass: 'md-dots-bg'
  }
]
const myResources = [
  {
    id: 1,
    color: '#ff0101',
    name: 'Resource A'
  },
  {
    id: 2,
    color: '#239a21',
    name: 'Resource B'
  },
  {
    id: 3,
    color: '#8f1ed6',
    name: 'Resource C'
  },
  {
    id: 4,
    color: '#01adff',
    name: 'Resource D'
  },
  {
    id: 5,
    color: '#d8ca1a',
    name: 'Resource E'
  }
]

const myView = {
  timeline: {
    allDay: false,
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '18:00'
  }
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/timeline-events/',
    (events) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true"
    :view="myView"
    :data="myEvents"
    :resources="myResources"
    :invalid="myInvalid"
    :colors="myColors"
  />
</template>

<style>
.md-lunch-break-class.mbsc-schedule-invalid {
  text-align: center;
  align-items: center;
  font-weight: bold;
  background: repeating-linear-gradient(-45deg, #f3f3f3, #f3f3f3 11px, #e5e5e5 11px, #e5e5e5 22px);
}

.md-stripes-bg {
  background: repeating-linear-gradient(-45deg, #fcfffc, #fcfffc 10px, #eefbec 10px, #eefbec 20px);
}

.md-dots-bg {
  background-image: radial-gradient(#a7a7a7 20%, transparent 20%);
  background-color: #f9f9f9;
  background-position:
    0 0,
    10px 10px;
  background-size: 20px 20px;
}

.md-rect-bg {
  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;
}
</style>
```

### SFC TS

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

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

const myEvents = ref<MbscCalendarEvent[]>([])

const myInvalid = [
  {
    start: '12:00',
    end: '13:00',
    title: 'Lunch break',
    recurring: {
      repeat: 'weekly',
      weekDays: 'MO,TU,WE,TH,FR'
    },
    cssClass: 'md-lunch-break-class mbsc-flex'
  }
]

const myColors: MbscCalendarColor[] = [
  {
    resource: 2,
    start: '09:00',
    end: '11:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'MO'
    },
    cssClass: 'md-rect-bg'
  },
  {
    resource: 1,
    start: '10:00',
    end: '12:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'WE'
    },
    cssClass: 'md-rect-bg'
  },
  {
    resource: 3,
    start: '14:00',
    end: '17:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'TH'
    },
    cssClass: 'md-rect-bg'
  },
  {
    resource: 4,
    start: '13:00',
    end: '18:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'MO'
    },
    cssClass: 'md-rect-bg'
  },
  {
    resource: 1,
    start: '09:00',
    end: '12:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'FR'
    },
    cssClass: 'md-stripes-bg'
  },
  {
    resource: 3,
    start: '09:00',
    end: '12:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'TU'
    },
    cssClass: 'md-stripes-bg'
  },
  {
    resource: 5,
    start: '10:00',
    end: '12:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'MO'
    },
    cssClass: 'md-stripes-bg'
  },
  {
    resource: 5,
    start: '13:00',
    end: '17:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'TU'
    },
    cssClass: 'md-stripes-bg'
  },
  {
    resource: 1,
    start: '09:00',
    end: '12:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'TH'
    },
    cssClass: 'md-dots-bg'
  },
  {
    resource: 2,
    start: '06:00',
    end: '12:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'TU'
    },
    cssClass: 'md-dots-bg'
  },
  {
    resource: 4,
    start: '15:00',
    end: '17:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'FR'
    },
    cssClass: 'md-dots-bg'
  },
  {
    resource: 4,
    start: '14:00',
    end: '18:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'WE'
    },
    cssClass: 'md-dots-bg'
  }
]
const myResources: MbscResource[] = [
  {
    id: 1,
    color: '#ff0101',
    name: 'Resource A'
  },
  {
    id: 2,
    color: '#239a21',
    name: 'Resource B'
  },
  {
    id: 3,
    color: '#8f1ed6',
    name: 'Resource C'
  },
  {
    id: 4,
    color: '#01adff',
    name: 'Resource D'
  },
  {
    id: 5,
    color: '#d8ca1a',
    name: 'Resource E'
  }
]

const myView: MbscEventcalendarView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '18:00'
  }
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/timeline-events/',
    (events: MbscCalendarEvent[]) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true"
    :view="myView"
    :data="myEvents"
    :resources="myResources"
    :invalid="myInvalid"
    :colors="myColors"
  />
</template>

<style>
.md-lunch-break-class.mbsc-schedule-invalid {
  text-align: center;
  align-items: center;
  font-weight: bold;
  background: repeating-linear-gradient(-45deg, #f3f3f3, #f3f3f3 11px, #e5e5e5 11px, #e5e5e5 22px);
}

.md-stripes-bg {
  background: repeating-linear-gradient(-45deg, #fcfffc, #fcfffc 10px, #eefbec 10px, #eefbec 20px);
}

.md-dots-bg {
  background-image: radial-gradient(#a7a7a7 20%, transparent 20%);
  background-color: #f9f9f9;
  background-position:
    0 0,
    10px 10px;
  background-size: 20px 20px;
}

.md-rect-bg {
  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;
}
</style>
```

## Implementation notes

- Use `timeline: { allDay: false, type: 'week', startDay: 1, endDay: 5, startTime: '09:00', endTime: '18:00' }` - a Mon-Fri work week view with the 9am-6pm time range and no all-day row.
- Define 5 resources (A-E), each with `id`, `name`, and `color`.
- Load events from `https://trial.mobiscroll.com/timeline-events/` via JSONP using `getJson(url, callback, 'jsonp')`. In the callback, call `inst.setEvents(events)` for the imperative API.
- **Invalid block** - pass one entry to the `invalid` array: 12:00-13:00 recurring on weekdays (`weekDays: 'MO,TU,WE,TH,FR'`), with `title: 'Lunch break'` and `cssClass: 'md-lunch-break-class mbsc-flex'`. This blocks the lunch slot across all resources and renders it with a custom diagonal grey-stripe pattern, centered bold text.
- **Color overlays** - pass 12 entries to the `colors` array, each targeting a specific resource and time range recurring on one weekday. Assign one of three CSS classes per entry:
  - `md-rect-bg`: a pink checkerboard pattern (4 entries across different resources and weekdays)
  - `md-stripes-bg`: a subtle diagonal green-white stripe pattern (4 entries)
  - `md-dots-bg`: a dot/radial-gradient pattern on a light grey background (4 entries)
- **CSS classes** - implement the four visual patterns:
  - `.md-lunch-break-class.mbsc-schedule-invalid`: `text-align: center; align-items: center; font-weight: bold;` with a diagonal grey `repeating-linear-gradient` background
  - `.md-stripes-bg`: diagonal green-tinted `repeating-linear-gradient`
  - `.md-dots-bg`: `radial-gradient` dot pattern with 20×20px `background-size`
  - `.md-rect-bg`: double `repeating-linear-gradient` at 45° creating a pink checkerboard, `opacity: 0.8`

## 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: [Cell Hover Highlight](https://demo.mobiscroll.com/vue/timeline/dynamic-resource-column-highlight-on-cell-hover.md) - Add row and column hover highlighting to the Vue resource timeline — highlight the active resource row and date column on cell hover.
- Next: [Theme Customization](https://demo.mobiscroll.com/vue/timeline/themes-ios-material-windows.md) - Style the Vue Timeline with iOS, Material, or Windows themes — switch light/dark variants, use the theme builder for colors, or apply CSS overrides.