如何禁用反应性日历中的某些日期

Question

有人能告诉我如何把一系列禁用的日期传递到日历上吗？

我找遍了，却找不到该怎么做

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

Answer 1

编辑：继续向下滚动文档，还有一个名为tileDisabled的道具。所以这可能就是你的答案。

的第一个答案：，从文档来看，您最好的选择是使用可用的道具onClickDay、onClickMonth等。

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

我没有使用这个库，所以我不确定e.target.value是否会给出确切的数据，但是应该是这样的。

Answer 2

import React from "react"
import Calendar from 'react-calendar'
export default function Slots(){
const disableDates = new Date('August 19, 2022 23:15:30');
const date1=disableDates.getDate();

return(
<div className="calendar">
<Calendar
 tileDisabled={({date}) => date.getDate()===date1}
/>
</div>
)
}