Day Marks, Colors & Labels

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

Demo

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 
<Datepicker
    colors={[
        { 
            date: new Date(year, month, 2),
            background: '#f3ac5d'
        }, { 
            date: new Date(year, month, 3), 
            background: '#49b9b0'
        },{ 
            date: new Date(year, month, 6),
            highlight: '#f3a146'
        },{ 
            date: new Date(year, month, 11),
            background: '#e274d0'
        },{ 
            date: new Date(year, month, 15),
            highlight: '#b4c145'
        },{ 
            date: new Date(year, month, 19),
            background: '#8dec7d'
        },{ 
            date: new Date(year, month, 23),
            highlight: '#ff6a00'
        },{ 
            date: new Date(year, month, 11),
            background: '#ea4986',
            highlight: '#c7356d'
        },{ 
            recurring: { 
                repeat: 'yearly', month: 5, day: 1
            },
            background: '#f57777'
        }
    ]}
    marked={[
        { 
            date: new Date(year, month, 2), 
            color: '#46c4f3'
        }, { 
            date: new Date(year, month, 10), 
            color: '#7e56bd'
        }, { 
            date: new Date(year, month, 13), 
            color: '#f13f77'
        }, { 
            date: new Date(year, month, 13), 
            color: '#89d7c9'
        }, { 
            date: new Date(year, month, 21), 
            color: '#ffc400'
        }, { 
            date: new Date(year, month, 21), 
            color: '#8dec7d'
        },{ 
            recurring: { 
                repeat: 'yearly', month: 4, day: 1
            },
            color: 'ffc400'
        }
    ]}
    labels={[
        { 
            date: new Date(year, month, 2), 
            textColor: '#46c4f3',
            text: 'Ana BD'
        }, { 
            date: new Date(year, month, 3), 
            textColor: '#7e56bd',
            text: 'Concert'
        }, { 
            date: new Date(year, month, 8), 
            color: '#52a064',
            text: 'Trip'
        }, { 
            date: new Date(year, month, 16), 
            color: '#8dec7d',
            text: 'Math exam'
        }, { 
            date: new Date(year, month, 24), 
            color: '#f8b042',
            text: 'Party'
        },{ 
            recurring: { 
                repeat: 'yearly', month: 5, day: 1
            },
            color: 'red',
            title: 'Christmas'
        }
    ]}
/>
Preview in fullscreen

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.