Could someone tell me how to pass an array of disabled dates to the calendar?
I searched but couldn't find how to do it
https://www.npmjs.com/package/react-calendar
import React, { useState, useEffect} from 'react';
import Api from '../../services/api';
import Calendar from 'react-calendar';
import { useParams } from "react-router-dom";
import 'react-calendar/dist/Calendar.css';
function MyApp() {
const { id } = useParams();
const [value, onChange] = useState(new Date());
const [disabledDates, setDisabledDates] = useState([]);
useEffect(() => {
loadDisabledDates();
}, []);
function loadDisabledDates()
{
Api
.get("/dates/"+id)
.then((response) => {
setDisabledDates(response.data);
})
.catch((err) => {
console.error("error: " + err);
});
}
return (
<div>
<Calendar onChange={onChange} value={value} />
</div>
);
}
Edit:
Scrolling further down the documentation, there is also a prop called tileDisabled. So that's probably your answer.
First answer:
It looks, from the documentation, like your best bet is use the available props onClickDay, onClickMonth, etc
const handleClickDay = (e) => {
if(disableDates.includes(e.target.value)){
alert('this date is disabled')
}else{
//do something with the date
}
}
return(
<Calendar onChange={onChange} value={value}
onClickDay={handleClickDay} />
)
I haven't used this library, so I'm not sure e.target.value will give you exactly the data but it should be something like this.