---
title: "Vue Event calendar Colored Cell Backgrounds Example | Mobiscroll"
component: "Event calendar"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/eventcalendar/colored-cell-background"
---

# Colored Cell Backgrounds - Vue Event calendar demo

Color day-cell backgrounds in a Vue event calendar — mark exact or recuring dates or date ranges as visual highlights for holidays and special days. For Vue and Nuxt.

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

## Description

Color the background of the days 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/eventcalendar/recurring-events).

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/eventcalendar/event-hooks) and places where to drop logic to customize the experience.

**Want to color time ranges & days in the scheduler?** [Learn how to do it →](https://demo.mobiscroll.com/vue/scheduler/colored-cell-background)

## What this demo shows

- A desktop month-view event calendar where predefined day cells have pale colored backgrounds behind the events.
- **Colored day cells** Day backgrounds are used as visual markers while keeping event labels readable on top.
- **Event labels** Days with events display labels directly inside the month cells. Labels use different styles and colors to distinguish all-day events, multi-day, and timed events.
- **Overflow handling** The number of visible event labels depends on the available vertical space in the day cell. Additional events are moved into a popover and indicated by an `X more` label, where `X` represents the number of hidden events. Clicking it opens a popover that lists the remaining events for that day.
- **Label interaction** Hovering over or clicking an event label selects it and highlights the selected label.
- **Day cell states** Hovering a day cell highlights the day number with a gray background, while clicking the empty part of the cell selects the day and highlights the day number with a blue background.
- **Month navigation** The month can be changed by clicking and dragging the calendar left or right.
- **Header** The top-left side shows the current month and year, while the top-right side includes previous and next navigation arrows with a `Today` button between them.

## Best for

- **Holidays and observances** Highlighting public holidays, company holidays, and other special dates directly in the month grid.
- **Marked dates** Calling attention to predefined days that need visual emphasis without blocking event readability.
- **Calendar overview screens** Month views where background cues help people scan for important days while still keeping event labels visible.

## 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
- [`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 myColors = ref([
  {
    start: '2026-09-30T00:00',
    end: '2026-10-01T00:00',
    background: '#fde4c880'
  },
  {
    start: '2026-10-17T00:00',
    end: '2026-10-20T00:00',
    background: '#d5f1ea80'
  },
  {
    date: '2026-10-29T00:00',
    background: '#ffdbdb80'
  },
  {
    date: '2026-11-03T00:00',
    background: '#fbedd080'
  },
  {
    date: '2026-11-10T00:00',
    background: '#fbedd080'
  },
  {
    background: '#d6e81e1a',
    recurring: {
      repeat: 'monthly',
      day: -1
    }
  }
])

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" :data="myEvents" :colors="myColors" />
</template>
```

### SFC TS

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

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

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

const myColors = ref<MbscCalendarColor[]>([
  {
    start: '2026-09-30T00:00',
    end: '2026-10-01T00:00',
    background: '#fde4c880'
  },
  {
    start: '2026-10-17T00:00',
    end: '2026-10-20T00:00',
    background: '#d5f1ea80'
  },
  {
    date: '2026-10-29T00:00',
    background: '#ffdbdb80'
  },
  {
    date: '2026-11-03T00:00',
    background: '#fbedd080'
  },
  {
    date: '2026-11-10T00:00',
    background: '#fbedd080'
  },
  {
    background: '#d6e81e1a',
    recurring: {
      repeat: 'monthly',
      day: -1
    }
  }
])

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" :data="myEvents" :colors="myColors" />
</template>
```

## Implementation notes

- Pass a `colors` array to the `Eventcalendar`. Each entry sets a `background` color value and targets days using one of three shapes:
  - Single day: `{ date: '2026-01-29', background: '#ffdbdb80' }`
  - Date range: `{ start: '2026-01-17', end: '2026-01-20', background: '#d5f1ea80' }`
  - Recurring rule: `{ background: '#d6e81e1a', recurring: { repeat: 'monthly', day: -1 } }` - this example colors the last day of every month; the `recurring` object follows the same recurrence structure as event data.
- Load events from a remote endpoint using `getJson` and assign them to `data`; for the 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: [Show All or Limit Event Labels](https://demo.mobiscroll.com/vue/eventcalendar/show-more-all-labels.md) - Show all event labels with dynamic row heights or limit labels per day in a Vue month-view calendar — hidden events appear in a "show more" popover.
- Next: [Switch Day, Week and Month Views](https://demo.mobiscroll.com/vue/eventcalendar/switching-day-week-month-view.md) - Switch a Vue event calendar between day, week, and month views using a header segmented control — each view paired with a matching agenda list.