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

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