---
title: "Vue Scheduler Color-Coded Time Blocks Example | Mobiscroll"
component: "Scheduler"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/scheduler/colored-cell-background"
---

# Color-Coded Time Blocks - Vue Scheduler demo

Color Vue Scheduler cell backgrounds for time ranges — mark lunch breaks, maintenance windows, or recurring schedules. For Vue and Nuxt.

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

## Description

Color the background of entire days or time ranges with the [`colors`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-colors) option. You can specify backgrounds as `exact dates`, `ranges` or set up `recurring rules`. The `recurring` object works the [same way as for the events](https://demo.mobiscroll.com/vue/scheduler/recurring-events). Optionally, you can specify a `title` as well, which will be displayed on the colored block.

Use the [`page-loading`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onPageLoading) lifecycle event to color backgrounds runtime. You can [learn about lifecycle events](https://demo.mobiscroll.com/vue/scheduler/event-hooks) and places where to drop logic to customize the experience.

**Want to use patterns as backgrounds and customize how the invalid cells look?** [Learn how to do it →](https://demo.mobiscroll.com/vue/scheduler/colors-invalids-css-class)

## What this demo shows

- A desktop weekly scheduler layout with a fixed week strip at the top, a fixed all-day row below it, a scrollable scheduler time grid for the selected week where predefined cells on the time grid have pale colored backgrounds behind the events.
- **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 weeks and jump back to the current day.
- **Week view** The fixed strip below the header displays the days of the selected week, with the current date highlighted by a blue circle.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected week.
- **Colored time ranges** Predefined background colors mark specific time grid cells without blocking event labels.
- **Lunch marker** Weekdays from Monday to Friday show a pale red background from 12 PM to 1 PM, with a Lunch title in the top-left corner of the marked cell.
- **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.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **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

- **Recurring marked hours** Highlighting repeated time ranges such as lunch breaks, maintenance windows, or blocked working hours in a weekly scheduler.
- **Special dates and observances** Marking public holidays, company observances, or other notable dates directly in the scheduler background.
- **Scheduler 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
- [`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
- [`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 myView = {
  scheduler: { type: 'week' }
}

const myColors = [
  {
    date: '2026-10-29T00:00',
    background: '#f3c3d480'
  },
  {
    start: '2026-10-30T07:00',
    end: '2026-10-30T14:00',
    background: '#fde4c880'
  },
  {
    start: '2026-11-01T12:00',
    end: '2026-11-02T20:00',
    background: '#d5f1ea80'
  },
  {
    start: '2026-11-06T06:00',
    end: '2026-11-06T08:00',
    background: '#d5eaf780'
  },
  {
    start: '2026-11-10T00:00',
    end: '2026-11-13T00:00',
    allDay: true,
    background: '#e7ffe280'
  },
  {
    start: '2026-11-16T10:00',
    end: '2026-11-17T08:00',
    background: '#fbedd080'
  },
  {
    start: '12:00',
    end: '13:00',
    background: '#ffdbdb80',
    recurring: {
      repeat: 'weekly',
      weekDays: 'MO,TU,WE,TH,FR'
    },
    title: 'Lunch'
  }
]

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

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

### SFC TS

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

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

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

const myView: MbscEventcalendarView = {
  scheduler: { type: 'week' }
}

const myColors: MbscCalendarColor[] = [
  {
    date: '2026-10-29T00:00',
    background: '#f3c3d480'
  },
  {
    start: '2026-10-30T07:00',
    end: '2026-10-30T14:00',
    background: '#fde4c880'
  },
  {
    start: '2026-11-01T12:00',
    end: '2026-11-02T20:00',
    background: '#d5f1ea80'
  },
  {
    start: '2026-11-06T06:00',
    end: '2026-11-06T08:00',
    background: '#d5eaf780'
  },
  {
    start: '2026-11-10T00:00',
    end: '2026-11-13T00:00',
    allDay: true,
    background: '#e7ffe280'
  },
  {
    start: '2026-11-16T10:00',
    end: '2026-11-17T08:00',
    background: '#fbedd080'
  },
  {
    start: '12:00',
    end: '13:00',
    background: '#ffdbdb80',
    recurring: {
      repeat: 'weekly',
      weekDays: 'MO,TU,WE,TH,FR'
    },
    title: 'Lunch'
  }
]

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

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

## Implementation notes

- Use `view: { scheduler: { type: 'week' } }` and pass a `colors` array to the Eventcalendar. Each entry defines a background highlight for a date, time range, or recurring pattern.
- Color object fields: `date` (exact date - highlights the full column for that day), `start`/`end` (time range - use a time string like `'12:00'` for a recurring time-of-day slot, or a full datetime for a one-off range), `allDay: true` (targets the all-day row column rather than the time grid), `background` (color value, e.g., an RGBA hex string with opacity), `title` (optional label displayed on the colored block), `recurring` (same structure as event recurrence rules, e.g., `{ repeat: 'weekly', weekDays: 'MO,TU,WE,TH,FR' }`).
- Use `dyndatetime('y,m,d±N,hour')` offsets to anchor color ranges relative to today for demo data.
- Load events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP using `getJson(url, callback, 'jsonp')`. React/Angular/Vue: assign the fetched array to the state/property bound to the `data` prop. JS/jQuery (imperative API): call `inst.setEvents(events)` in the callback.

## 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: [Hide All-Day Section](https://demo.mobiscroll.com/vue/scheduler/disable-all-day-events.md) - Hide the all-day row in the Vue Scheduler to show only timed events — ideal for appointment booking, service scheduling, or shift-based views.
- Next: [Dynamic View Switching](https://demo.mobiscroll.com/vue/scheduler/switching-calendar-scheduler-agenda.md) - Switch between year, month, week, day, and agenda views in the Vue event calendar — via header control or programmatically.