How to mark particular dates in react-calender

user_7731521 0
Viewed 8387

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>
reactjs
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 enter image description here

user_77315210

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 class="react-calendar__tile react-calendar__month-view__days__day ...">
...
</button>

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

enter image description here

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

enter image description here

You can try it yourself here

Edit affectionate-darwin-fjp3o

user_118722460

This will helps you.Working code source code

Demo:evenfy

enter image description here

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 : "";}
user_90874160

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}
    />
user_58082320
Related