reactjsreact-calendar

Highlight some dates in react calendar


hello i have this calendar in my project, i want to highlight some date to mark that they are already used. can you tell me how to do that please ?

import React, { useState} from 'react';
import Calendar from 'react-calendar';

export default function Test() {
  const [date, setDate] = useState(new Date.toDateString());
  const dateToMark = [
    '3',
    '10',
    '20',
  ];

  return(
    <div>
      <p>{date}</p>
      <Calendar onChange={setDate} value={date}/>
    </div>
  );
}

thanks by advance and have a good code day.


Solution

  • import React, { useState} from 'react';
    import Calendar from 'react-calendar';
    
    export default function Test() {
      const [date, setDate] = useState([
        '3',
        '10',
        '20',
      ]);
    
      return(
        <div>
          <p>{date}</p>
          <Calendar onChange={setDate} value={date}/>
        </div>
      );
    }
    

    By passing date like initial value of usestate variable.