---
title: "Vue Range Day Marks, Colors & Labels Example | Mobiscroll"
component: "Range"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/range/dots-colors-labels"
---

# Day Marks, Colors & Labels - Vue Range demo

Highlight days with or background colors in the Vue date range picker — configure by exact date, date range, and or recurring rule. For Vue and Nuxt.

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

## Description

You can highlight days, mark them with colored dots, add labels or completely color the background of the days using the [`marked`](https://mobiscroll.com/docs/vue/datepicker/api#opt-marked), [`colors`](https://mobiscroll.com/docs/vue/datepicker/api#opt-colors) and [`labels`](https://mobiscroll.com/docs/vue/datepicker/api#opt-labels) options. This offers means to add more information to the calendar that could be valuable to users. While you can use the `colors` along with `marked` and `labels`, the latter two are mutually exclusive because they get rendered in the same place on the UI.

You can add them as `exact dates`, `ranges` or specify `recurring rules`. The `recurring` object supports [different ways to describe the rules](https://demo.mobiscroll.com/vue/range/recurring-values).

The passed date-times can also contain timezone data which requires a [`timezonePlugin`](https://mobiscroll.com/docs/vue/datepicker/api#opt-timezonePlugin) to be interpreted correctly. [Check out how timezones work](https://demo.mobiscroll.com/vue/range/setting-the-picker-timezone) in the range.

Use the [`onPageLoading`](https://mobiscroll.com/docs/vue/datepicker/api#event-onPageLoading) lifecycle event to load the data runtime. You can [learn about lifecycle events](https://demo.mobiscroll.com/vue/range/event-hooks) and places where to drop logic to customize the experience.

## What this demo shows

- This inline examples demonstrate different ways how to hilight or mark dates on the date range picker. 
- **Background and highlight settings** The `Set the background & highlight specific or recurring dates` panel contains two switches, both disabled by default. `Show cell backgrounds` adds rectangular background colors to configured dates, while `Show highlighted days` adds circular background colors.
- **Marked days and label settings** The `Marked days & labels are mutually exclusive` panel provides three options. `Show marked days` is selected by default and displays one or more colored dots below configured dates. `Show labels` displays colored labels below configured dates. `Don't show marked days and labels` hides both dots and labels.
- **Inline date range picker** Display the date range picker directly on the page without an input by using inline display mode.
- **Start and end inputs** Use the clickable inputs above the calendar header to choose which range boundary to set. The active input has a white background, while the inactive input has a gray background. A clear button appears after a range is selected.
- **Header navigation** Open the month and year picker from the label in the upper-left corner, or use the previous and next arrow buttons to navigate between months.
- **Month view** View dates in a grid below a fixed weekday header with abbreviated day names from Sunday through Saturday.
- **Month navigation** Drag the calendar left or right to move between months.
- **Day cell states** Hover over a day to highlight its number with a gray background. The first selected day sets the range start, and the second sets the range end. Selected days are highlighted in blue.
- **Current date** The current date is highlighted by default and remains blue when another date is selected.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one navigates to its corresponding month.

## Best for

- **Availability calendars** Highlight available, unavailable, or limited-availability dates in booking and reservation flows.
- **Deadlines and milestones** Mark due dates, release dates, or other important dates while users choose a date.
- **Status indicators** Use colored dots to show one or more compact statuses without replacing the date number.
- **Date-specific context** Use labels when short text provides more useful context than a marker alone.
- **Recurring schedules** Apply consistent visual cues to repeating dates, such as weekly service days or recurring availability.

## Tutorial

### Set the background & highlight specific or recurring dates

- [ ] Show cell backgrounds
- [ ] Show highlighted days

### Marked days & labels are mutually exclusive

- (x) Show marked days
- ( ) Show labels
- ( ) Don't show marked days and labels

```js
<script setup>
const coloredDays = [
  { 
    date: '2026-10-02T00:00',
    background: '#f3ac5d'
  }, { 
    date: '2026-10-03T00:00', 
    background: '#49b9b0'
  },{ 
    date: '2026-10-06T00:00',
    highlight: '#f3a146'
  },{ 
    date: '2026-10-11T00:00',
    background: '#e274d0'
  },{ 
    date: '2026-10-15T00:00',
    highlight: '#b4c145'
  },{ 
    date: '2026-10-19T00:00',
    background: '#8dec7d'
  },{ 
    date: '2026-10-23T00:00',
    highlight: '#ff6a00'
  },{ 
    date: '2026-10-11T00:00',
    background: '#ea4986',
    highlight: '#c7356d'
  },{ 
    recurring: { 
        repeat: 'yearly', month: 5, day: 1
    },
    background: '#f57777'
  }
]
const markedDays = [
  { 
    date: '2026-10-02T00:00', 
    color: '#46c4f3'
  }, { 
    date: '2026-10-10T00:00', 
    color: '#7e56bd'
  }, { 
    date: '2026-10-13T00:00', 
    color: '#f13f77'
  }, { 
    date: '2026-10-13T00:00', 
    color: '#89d7c9'
  }, { 
    date: '2026-10-21T00:00', 
    color: '#ffc400'
  }, { 
    date: '2026-10-21T00:00', 
    color: '#8dec7d'
  },{ 
    recurring: { 
      repeat: 'yearly', month: 4, day: 1
    },
    color: 'ffc400'
  }
]const labelDays = [
  { 
    date: '2026-10-02T00:00', 
    textColor: '#46c4f3',
    text: 'Ana BD'
  }, { 
    date: '2026-10-03T00:00', 
    textColor: '#7e56bd',
    text: 'Concert'
  }, { 
    date: '2026-10-08T00:00', 
    color: '#52a064',
    text: 'Trip'
  }, { 
    date: '2026-10-16T00:00', 
    color: '#8dec7d',
    text: 'Math exam'
  }, { 
    date: '2026-10-24T00:00', 
    color: '#f8b042',
    text: 'Party'
  },{ 
    recurring: { 
    repeat: 'yearly', month: 5, day: 1
    },
    color: 'red',
    title: 'Christmas'
  }
]
</script>

<template>
  <MbscDatepicker
    :marked="markedDays"
    :colors="coloredDays"
    :labels="labelDays"
  />
</template>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/vue/datepicker/api#opt-controls) - option
- [`marked`](https://mobiscroll.com/docs/vue/datepicker/api#opt-marked) - option
- [`showRangeLabels`](https://mobiscroll.com/docs/vue/datepicker/api#opt-showRangeLabels) - option
- [`select`](https://mobiscroll.com/docs/vue/datepicker/api#opt-select) - option
- [`display`](https://mobiscroll.com/docs/vue/datepicker/api#opt-display) - option
- [`colors`](https://mobiscroll.com/docs/vue/datepicker/api#opt-colors) - option
- [`labels`](https://mobiscroll.com/docs/vue/datepicker/api#opt-labels) - option

## Code

### SFC JS

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

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

const markedDays = [
  { recurring: { repeat: 'yearly', month: 5, day: 1 }, color: '#ffc400' },
  { recurring: { repeat: 'yearly', month: 12, day: 24 }, color: '#ffee00' },
  { recurring: { repeat: 'yearly', month: 12, day: 25 }, color: 'red' },
  { date: '2026-11-04T00:00' },
  { date: '2026-08-13T00:00' },
  { date: '2026-10-02T00:00', color: '#46c4f3' },
  { date: '2026-10-06T00:00', color: '#7e56bd' },
  { date: '2026-10-11T00:00', color: '#7e56bd' },
  { date: '2026-10-19T00:00', color: '#89d7c9' },
  { date: '2026-10-28T00:00', color: '#ea4986' },
  { date: '2026-10-13T00:00', color: '#7e56bd' },
  { date: '2026-10-13T00:00', color: '#f13f77' },
  { date: '2026-10-13T00:00', color: '#89d7c9' },
  { date: '2026-10-13T00:00', color: '#8dec7d' },
  { date: '2026-10-21T00:00', color: '#ffc400' },
  { date: '2026-10-21T00:00', color: '#8dec7d' },
  { start: '2026-11-15T00:00', end: '2026-11-18T00:00', color: '#f4511e' }
]

const coloredDays = [
  { recurring: { repeat: 'yearly', month: 12, day: 8 }, background: '#9ccc65' },
  { recurring: { repeat: 'yearly', month: 5, day: 1 }, background: 'red' },
  { recurring: { repeat: 'yearly', month: 12, day: 24 }, background: '#fff568' },
  { recurring: { repeat: 'yearly', month: 12, day: 25 }, background: '#e88080' },
  { date: '2026-11-04T00:00', background: '#cfd8dc' },
  { date: '2026-12-24T00:00', background: '#9575cd' },
  { date: '2026-08-13T00:00', background: '#d4e157' },
  { date: '2026-09-06T00:00', background: '#f4511e' },
  { date: '2026-11-06T00:00', background: '#46c4f3' },
  { date: '2026-11-22T00:00', background: '#7e56bd' },
  { date: '2026-09-11T00:00', background: '#46c4f3' },
  { date: '2026-09-29T00:00', background: '#7e56bd' },
  { date: '2026-10-02T00:00', background: '#46c4f3' },
  { date: '2026-10-03T00:00', background: '#7e56bd' },
  { date: '2026-10-11T00:00', background: '#f13f77' },
  { date: '2026-10-19T00:00', background: '#8dec7d' },
  { date: '2026-10-28T00:00', background: '#ea4986' },
  {
    start: '2026-11-15T00:00',
    end: '2026-11-18T00:00',
    text: 'Conference',
    background: '#f4511e'
  }
]

const labelDays = [
  { recurring: { repeat: 'yearly', month: 12, day: 25 }, title: 'Christmas', color: '#f48fb1' },
  { recurring: { repeat: 'yearly', month: 1, day: 1 }, title: 'New year' },
  { recurring: { repeat: 'yearly', month: 12, day: 1 }, title: 'Meeting', color: '#ffc400' },
  { date: '2026-11-04T00:00', text: 'Spa day', color: '#cfd8dc' },
  { date: '2026-12-24T00:00', text: 'BD Party', color: '#9ccc65' },
  { date: '2026-08-13T00:00', text: 'Exams', color: '#d4e157' },
  { date: '2026-09-06T00:00', text: 'Trip', color: '#f4511e' },
  { date: '2026-11-06T00:00', color: '#46c4f3', text: 'Pizza Night' },
  { date: '2026-11-22T00:00', color: '#7e56bd', text: 'Beerpong' },
  { date: '2026-09-11T00:00', color: '#46c4f3', text: 'Anniversary' },
  { date: '2026-09-29T00:00', color: '#7e56bd', text: 'Pete BD' },
  { date: '2026-10-02T00:00', color: '#46c4f3', text: 'Ana BD' },
  { date: '2026-10-03T00:00', color: '#7e56bd', text: 'Concert' },
  { date: '2026-10-11T00:00', color: '#f13f77', text: 'Trip' },
  { date: '2026-10-19T00:00', color: '#8dec7d', text: 'Math exam' },
  { date: '2026-10-28T00:00', color: '#ea4986', text: 'Party' },
  {
    start: '2026-11-15T00:00',
    end: '2026-11-18T00:00',
    text: 'Conference',
    color: '#f4511e'
  }
]
</script>

<template>
  <MbscPage>
    <div class="mbsc-grid">
      <div class="mbsc-row">
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Marked days</div>
            <MbscDatepicker
              :controls="['calendar']"
              :marked="markedDays"
              :showRangeLabels="false"
              select="range"
              display="inline"
            />
          </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Colored days</div>
            <MbscDatepicker
              :controls="['calendar']"
              :colors="coloredDays"
              :showRangeLabels="false"
              select="range"
              display="inline"
            />
          </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Labels</div>
            <MbscDatepicker
              :controls="['calendar']"
              :labels="labelDays"
              :showRangeLabels="false"
              select="range"
              display="inline"
            />
          </div>
        </div>
      </div>
    </div>
  </MbscPage>
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { MbscDatepicker, MbscPage, setOptions } from '@mobiscroll/vue'
import type { MbscCalendarColor, MbscCalendarLabel, MbscCalendarMarked } from '@mobiscroll/vue'

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

const markedDays: MbscCalendarMarked[] = [
  { recurring: { repeat: 'yearly', month: 5, day: 1 }, color: '#ffc400' },
  { recurring: { repeat: 'yearly', month: 12, day: 24 }, color: '#ffee00' },
  { recurring: { repeat: 'yearly', month: 12, day: 25 }, color: 'red' },
  { date: '2026-11-04T00:00' },
  { date: '2026-08-13T00:00' },
  { date: '2026-10-02T00:00', color: '#46c4f3' },
  { date: '2026-10-06T00:00', color: '#7e56bd' },
  { date: '2026-10-11T00:00', color: '#7e56bd' },
  { date: '2026-10-19T00:00', color: '#89d7c9' },
  { date: '2026-10-28T00:00', color: '#ea4986' },
  { date: '2026-10-13T00:00', color: '#7e56bd' },
  { date: '2026-10-13T00:00', color: '#f13f77' },
  { date: '2026-10-13T00:00', color: '#89d7c9' },
  { date: '2026-10-13T00:00', color: '#8dec7d' },
  { date: '2026-10-21T00:00', color: '#ffc400' },
  { date: '2026-10-21T00:00', color: '#8dec7d' },
  { start: '2026-11-15T00:00', end: '2026-11-18T00:00', color: '#f4511e' }
]

const coloredDays: MbscCalendarColor[] = [
  { recurring: { repeat: 'yearly', month: 12, day: 8 }, background: '#9ccc65' },
  { recurring: { repeat: 'yearly', month: 5, day: 1 }, background: 'red' },
  { recurring: { repeat: 'yearly', month: 12, day: 24 }, background: '#fff568' },
  { recurring: { repeat: 'yearly', month: 12, day: 25 }, background: '#e88080' },
  { date: '2026-11-04T00:00', background: '#cfd8dc' },
  { date: '2026-12-24T00:00', background: '#9575cd' },
  { date: '2026-08-13T00:00', background: '#d4e157' },
  { date: '2026-09-06T00:00', background: '#f4511e' },
  { date: '2026-11-06T00:00', background: '#46c4f3' },
  { date: '2026-11-22T00:00', background: '#7e56bd' },
  { date: '2026-09-11T00:00', background: '#46c4f3' },
  { date: '2026-09-29T00:00', background: '#7e56bd' },
  { date: '2026-10-02T00:00', background: '#46c4f3' },
  { date: '2026-10-03T00:00', background: '#7e56bd' },
  { date: '2026-10-11T00:00', background: '#f13f77' },
  { date: '2026-10-19T00:00', background: '#8dec7d' },
  { date: '2026-10-28T00:00', background: '#ea4986' },
  {
    start: '2026-11-15T00:00',
    end: '2026-11-18T00:00',
    text: 'Conference',
    background: '#f4511e'
  }
]

const labelDays: MbscCalendarLabel[] = [
  { recurring: { repeat: 'yearly', month: 12, day: 25 }, title: 'Christmas', color: '#f48fb1' },
  { recurring: { repeat: 'yearly', month: 1, day: 1 }, title: 'New year' },
  { recurring: { repeat: 'yearly', month: 12, day: 1 }, title: 'Meeting', color: '#ffc400' },
  { date: '2026-11-04T00:00', text: 'Spa day', color: '#cfd8dc' },
  { date: '2026-12-24T00:00', text: 'BD Party', color: '#9ccc65' },
  { date: '2026-08-13T00:00', text: 'Exams', color: '#d4e157' },
  { date: '2026-09-06T00:00', text: 'Trip', color: '#f4511e' },
  { date: '2026-11-06T00:00', color: '#46c4f3', text: 'Pizza Night' },
  { date: '2026-11-22T00:00', color: '#7e56bd', text: 'Beerpong' },
  { date: '2026-09-11T00:00', color: '#46c4f3', text: 'Anniversary' },
  { date: '2026-09-29T00:00', color: '#7e56bd', text: 'Pete BD' },
  { date: '2026-10-02T00:00', color: '#46c4f3', text: 'Ana BD' },
  { date: '2026-10-03T00:00', color: '#7e56bd', text: 'Concert' },
  { date: '2026-10-11T00:00', color: '#f13f77', text: 'Trip' },
  { date: '2026-10-19T00:00', color: '#8dec7d', text: 'Math exam' },
  { date: '2026-10-28T00:00', color: '#ea4986', text: 'Party' },
  {
    start: '2026-11-15T00:00',
    end: '2026-11-18T00:00',
    text: 'Conference',
    color: '#f4511e'
  }
]
</script>

<template>
  <MbscPage>
    <div class="mbsc-grid">
      <div class="mbsc-row">
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Marked days</div>
            <MbscDatepicker
              :controls="['calendar']"
              :marked="markedDays"
              :showRangeLabels="false"
              select="range"
              display="inline"
            />
          </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Colored days</div>
            <MbscDatepicker
              :controls="['calendar']"
              :colors="coloredDays"
              :showRangeLabels="false"
              select="range"
              display="inline"
            />
          </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Labels</div>
            <MbscDatepicker
              :controls="['calendar']"
              :labels="labelDays"
              :showRangeLabels="false"
              select="range"
              display="inline"
            />
          </div>
        </div>
      </div>
    </div>
  </MbscPage>
</template>
```

## Implementation notes

- Set `select: 'range'` (or `range: 'select'` in older syntax) on the `Datepicker` with `controls: ['calendar']` and `display: 'inline'`.
- Use the `colors` option for cell backgrounds and highlights: pass an array of `{ date, background }` entries for a rectangular cell background, `{ date, highlight }` for a circular highlight, or both keys on the same entry to combine them. A single entry can also combine `background`/`highlight` with a `recurring` rule instead of a fixed `date` (e.g. `{ recurring: { repeat: 'yearly', month, day }, background: '#f57777' }`).
- Use the `marked` option for colored dots: an array of `{ date, color }` (or `{ recurring: {...}, color }`) entries; multiple entries sharing the same `date` render multiple dots on that day.
- Use the `labels` option for text labels below a date: an array of `{ date, text, color }` or `{ date, text, textColor }` entries (or `{ recurring: {...}, title, color }`), where `color` sets the label background and `textColor` sets a text-only color.
- `marked` and `labels` are mutually exclusive - set one or the other (set the unused one to `null`/`undefined`), since both render in the same slot below the date number; `colors` can be combined with either.
- All three options accept exact dates, `{ start, end }` ranges, or `recurring` rule objects (e.g. `{ repeat: 'yearly', month, day }`) for the `date`/range key.
- Changes are applied at runtime via `.setOptions({ colors: [...] })`, `.setOptions({ marked: [...] })`, or `.setOptions({ labels: [...] })` on the calendar instance; passing `null` clears that option.

## 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: [Label Customization](https://demo.mobiscroll.com/vue/range/customizing-labels-selection.md) - Override the start/end date labels on the Vue date range picker — use “Check in/Check out” for hotels or “Outbound/Return” for flights, or hide them.