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

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

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

• javascript
• reactjs
• react-calendar

3 Answers 3

Going off the other answers, here is how to use Array.includes() method to check against many dates

import { FC, useEffect, useState } from 'react'
import Calendar from 'react-calendar'
import { add, format } from "date-fns";


interface iProps {
  values: any | undefined,
  setValues: any,
  times: string[] | undefined,
  setTimes: any,
}


const bDate1 = new Date('2023-05-25').getDate()
const bDate2 = new Date('2023-05-26').getDate()
const bDate3 = new Date('2023-05-27').getDate()

const blackoutDates = [bDate1, bDate2, bDate3]

export const CalendarTime: FC<iProps> = ({ values, setValues, times,  setTimes }) => {


  return (


      <Calendar
        minDate={new Date()}
        className={'REACT-CALENDAR p-2'}
        view='month'
        onClickDay={(date) => {
          setValues((prev:any) => ({...prev, date: format(date, 'yyyy-MM-dd')}))

        }}
        tileDisabled={({date}) => blackoutDates.includes(date.getDate()) }
      // value={date}
      />


  )
}

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

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.