score:8

Accepted answer

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

score:0

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

score:1

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

score:1

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

Related Query

More Query from same tag