---
title: "React Calendar Colored Dots, Highlights & Labels Example | Mobiscroll"
component: "Calendar"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/calendar/dots-colors-labels"
---

# Colored Dots, Highlights & Labels - React Calendar demo

Mark calendar dates with colored dots, background highlights, or text labels — for specific dates, date ranges, or recurring rules. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/calendar/dots-colors-labels)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/datepicker/calendar/dots-colors-labels)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/datepicker/calendar/dots-colors-labels)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/calendar/dots-colors-labels.md), [jQuery](https://demo.mobiscroll.com/jquery/calendar/dots-colors-labels.md), [Angular](https://demo.mobiscroll.com/angular/calendar/dots-colors-labels.md), [Vue](https://demo.mobiscroll.com/vue/calendar/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/react/datepicker/api#opt-marked), [`colors`](https://mobiscroll.com/docs/react/datepicker/api#opt-colors) and [`labels`](https://mobiscroll.com/docs/react/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/react/calendar/recurring-values).

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

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

**Looking to show event data and use multiple labels?** [Check out the event calendar →](https://demo.mobiscroll.com/react/eventcalendar/event-labels)

## What this demo shows

- This inline examples demonstrate different ways how to hilight or mark dates on the date picker calendar. 
- **Header navigation** The month and year label in the top left opens a month and year picker. The blue previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header displays abbreviated day names from Sunday through Saturday, with the dates arranged in a grid below it.
- **Month navigation** The month can be changed by clicking and dragging the calendar left or right.
- **Day cell states** Hovering a day highlights the day number with a gray background. Selecting a day highlights the day number with a blue background. The current date is highlighted by default and remains blue when the user selects another date.
- **Adjacent months** Dates from the previous and next months appear with a muted style. Selecting one navigates the calendar to the corresponding month. 
- **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.

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

```jsx
<Datepicker
    marked={[
        { 
            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'
        }
    ]}/>
```

With "Show labels":

```jsx
<Datepicker
    labels={[
        { 
            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'
        }
    ]}
/>
```

With "Don't show marked days and labels":

```jsx
<Datepicker/>
```

## API used in this demo

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

## Code

### JSX

```jsx
import { Datepicker, Page, setOptions } from '@mobiscroll/react';
import { useMemo } from 'react';

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

function App() {
  const myMarked = useMemo(
    () => [
      { 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 myColors = useMemo(
    () => [
      { 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 myLabels = useMemo(
    () => [
      { 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' },
    ],
    [],
  );

  return (
    <Page>
      <div className="mbsc-grid">
        <div className="mbsc-row">
          <div className="mbsc-col-sm-12 mbsc-col-md-4">
            <div className="mbsc-form-group">
              <div className="mbsc-form-group-title">Marked days</div>
              <Datepicker display="inline" marked={myMarked} />
            </div>
          </div>
          <div className="mbsc-col-sm-12 mbsc-col-md-4">
            <div className="mbsc-form-group">
              <div className="mbsc-form-group-title">Colored days</div>
              <Datepicker display="inline" colors={myColors} />
            </div>
          </div>
          <div className="mbsc-col-sm-12 mbsc-col-md-4">
            <div className="mbsc-form-group">
              <div className="mbsc-form-group-title">Labels</div>
              <Datepicker display="inline" labels={myLabels} />
            </div>
          </div>
        </div>
      </div>
    </Page>
  );
}

export default App;
```

### TSX

```tsx
import {
  Datepicker,
  MbscCalendarColor,
  MbscCalendarLabel,
  MbscCalendarMarked,
  Page,
  setOptions,
} from '@mobiscroll/react';
import { FC, useMemo } from 'react';

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

const App: FC = () => {
  const myMarked = useMemo<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 myColors = useMemo<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 myLabels = useMemo<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' },
    ],
    [],
  );

  return (
    <Page>
      <div className="mbsc-grid">
        <div className="mbsc-row">
          <div className="mbsc-col-sm-12 mbsc-col-md-4">
            <div className="mbsc-form-group">
              <div className="mbsc-form-group-title">Marked days</div>
              <Datepicker display="inline" marked={myMarked} />
            </div>
          </div>
          <div className="mbsc-col-sm-12 mbsc-col-md-4">
            <div className="mbsc-form-group">
              <div className="mbsc-form-group-title">Colored days</div>
              <Datepicker display="inline" colors={myColors} />
            </div>
          </div>
          <div className="mbsc-col-sm-12 mbsc-col-md-4">
            <div className="mbsc-form-group">
              <div className="mbsc-form-group-title">Labels</div>
              <Datepicker display="inline" labels={myLabels} />
            </div>
          </div>
        </div>
      </div>
    </Page>
  );
};
export default App;
```

## Implementation notes

- Use `controls: ['calendar']` and `display: 'inline'`.
- **Marked days**: pass an array to `marked`, each entry with `date` (or a `recurring` rule) and `color` - renders as one or more small colored dots below the date. Multiple entries can share the same `date` to show several dots.
- **Cell backgrounds / highlighted days**: pass an array to `colors`, each entry with `date` (or `recurring`) and either `background` (rectangular cell background color) or `highlight` (circular highlight around the day number) - an entry can set both on the same date.
- **Labels**: pass an array to `labels`, each entry with `date` (or `recurring`), `text`, and `color`/`textColor` - renders a colored text label below the date.
- `marked`, `colors`, and `labels` can each be set/cleared independently via `setOptions`. `marked` and `labels` both render below the day number and would visually compete for space if combined, though nothing prevents setting both directly via the API.
- All three options (`marked`, `colors`, `labels`) accept a `recurring` object instead of a fixed `date` for repeating entries, e.g. `{ recurring: { repeat: 'yearly', month: 5, day: 1 } }`.

## 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-react.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 react
   ```

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 react --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Previous: [Week & Month Views](https://demo.mobiscroll.com/react/calendar/week-to-month.md) - Show week and month calendar views in the React date picker — add a header view switcher so users can toggle between layouts.
- Next: [Scroll Direction, Week Numbers & Outer Days](https://demo.mobiscroll.com/react/calendar/month-change-direction-week-numbers-outer-days.md) - Configure a React calendar date picker — set horizontal or vertical month scrolling, show week numbers, and control whether outer days appear.