Vue Range Day Marks, Colors & Labels Example

You can highlight days, mark them with colored dots, add labels or completely color the background of the days using the marked, colors and 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.

The passed date-times can also contain timezone data which requires a timezonePlugin to be interpreted correctly. Check out how timezones work in the range.

Use the onPageLoading lifecycle event to load the data runtime. You can learn about lifecycle events and places where to drop logic to customize the experience.

Get started with this example

Set the background & highlight specific or recurring dates

Show cell backgrounds

Show highlighted days

Marked days & labels are mutually exclusive

Show marked days

Show labels

Don't show marked days and labels

Javascript jQuery Angular React Vue

<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>

Preview in fullscreen

Day Marks, Colors & Labels

Duplicate Session

Duplicate Session

Demo

Duplicate Session

Duplicate Session