How to mark particular dates in react-calender

How do I highlight specific Dates in react-calendar?

This is my code:

<Calendar style={{ height: 500 }} onChange={this.onChange} value={this.state.date} tileContent={d} hover={'2020-02-29'} tileDisabled={({ date }) => date.getDay() === 0} minDate={ new Date() } ></Calendar> 

4 Answers

I solved the issue........I modified my code

CSS code

 .highlight { color:red; } 

I have created an array of multiple dates

const mark = [ '04-03-2020', '03-03-2020', '05-03-2020' ] 

And finally, the calendar will look like this

<Calendar style={{ height: 500 }} onChange={this.onChange} value={this.state.date} tileClassName={({ date, view }) => { if(mark.find(x=>x===moment(date).format("DD-MM-YYYY"))){ return 'highlight' } }} tileDisabled={({ date }) => date.getDay() === 0} /*maxDate={new Date(2020, 1, 0)}</div>*/ minDate={ new Date() } > </Calendar> 

Output

You are using react-calendar. You can highlight a date very easily.

1. create a class highlight (name can be anything).
2. Import that style file (.css or .scss)

3. It have a props called tileClassName. Send a callback like below.

    <Calendar tileClassName={({ date, view }) => { // date will return every date visible on calendar and view will view type (eg. month) if(// your_condititon ){ return 'highlight'; // your class name } }} onChange={this.onChange} value={this.state.date} /> 

Here is a common way to find out how to adjust styles with some libs which you are not familiar with.

If you look at the DOM tree, you would find each date button have class like below

<button> ... </button> 

By change the style of it, we find that's the element we want to handle.

Notice the className react-calendar__tile

If we checkout their document by searching that class name's tile. You would find:

tileClassName
Class name(s) that will be applied to a given calendar item (day on month view, month on year view and so on).

By providing css class to it, you can customize your styles.

For example, make it blue

<Calendar tileClassName="content" ... /> 

.content { font-size: 20px; color: blue; } 

You can try it yourself here

This will helps you.Working code source code

Demo:evenfy

Code:

dateArray=[{date:"2021-06-11T09:47:17.456000Z",colorName: "pink"},{date:"2021-06-12T09:47:17.456000Z",colorName: "blue"}.{date:"2021-06-16T09:47:17.456000Z",colorName: "blue"}] <Calendar tileClassName={({ activeStartDate, date, view }) => this.setClass(date)} /> setClass = (date) => { const dateobj = dateArray.find((x) => { return ( date.getDay() === new Date(x.date).getDay() && date.getMonth() === new Date(x.date).getMonth() && date.getDate() === new Date(x.date).getDate() ); }); return dateobj ? dateobj.colorName : "";}