My project is a form users fill in to book inspections. I've got a react calendar that they use to choose an inspection date. I need the calendar to make all days before the current date and all future weekends inactive (so only business days in the future are clickable. Then depending on the user input (a selection from a list of possible inspection types) the calendar to make the first available day 1 or 2 days in the future.
I've managed to filter future weekends and the built-in minDate prop makes sure that all days before the current date are inactive but my filtering is still faulty. It skips 7 days rather than 2 days. Please help.
const [date, setDate] = useState(new Date());
const dateFormatted = format(date, "yyyy/MM/dd");
const dateSelected = date =>{
date.toLocaleDateString();
setDate(date);
};
//This is how I get id value of the different inspectiuon types
const [enquiryType, setEnquiryType] = useState('0');
const handleSelect = (event) => {
const index = event.target.selectedIndex;
const optionElement = event.target.childNodes[index];
const optionElementId = optionElement.getAttribute('id');
setEnquiryType(optionElementId);
}
const singleDay = addDays(date, 1);
const doubleDays = addDays(date, 2);
const calcDays = () => {
if (enquiryType === '0'){
return new Date();
} else if (enquiryType === '1'){
return singleDay;
} else if (enquiryType === '2'){
return doubleDays;
}
}
<Calendar
tileDisabled={({ date }) => date.getDay() === 0 || date.getDay() === 6}
prev2AriaLabel={null}
prev2Label={null}
next2Label={null}
locale={null}
showNeighboringMonth={false}
minDetail="month"
minDate={calcDays()}
value={date}
onClickDay={dateSelected}
//onChange={dateSelected}
/>