Disable individual dates

[JollyGrin]

I'm trying to create an event calendar that allows people to select dates. Yet once someone selects a date, I need to disable it for others.

Thus how do I pass a disabled prop to individual dates?

[aboveyunhai]

Right now there is no such functionality, but I can definitely come up one easily later. something like the following

disabledDates={new Set({
 // pass your date here
 // you need to keep updating your own logic here.
})}

You just need to come up your own set dynamically if it keeps changing but I generally wouldn't recommend.

[JollyGrin]

Great! That would be very useful! Using another library atm to handle this behavior so no rush/priority. I'm passing an array of dates and it disables those

[aboveyunhai]

close by #49

[natezhengbne]

Hi @aboveyunhai, I noticed you've added a disabledDates field to disable specific days. However, it seems this field doesn't support disabling weekends on the calendar dynamically. To achieve this, consider implementing a similar approach to react-datepicker, using a callback function like filterDate to dynamically disable days at runtime.

Would you be interested in receiving a pull request for this feature?

[aboveyunhai]

Hi @aboveyunhai, I noticed you've added a disabledDates field to disable specific days. However, it seems this field doesn't support disabling weekends on the calendar dynamically. To achieve this, consider implementing a similar approach to react-datepicker, using a callback function like filterDate to dynamically disable days at runtime.

Would you be interested in receiving a pull request for this feature?

Feel free to create the PR! just wonder why the disabledDates doesn't work in your case doesn't the following work?

const disabledDates = useMemo(() => { 
   // your filter logic here, which is the same as the filterDate function
  // put dynamic dates into the Set
   return new Set();
}, [])

disabledDates = {disabledDates}

I guess probably the current disabledDate doesn't work with range and it's really limited.

[natezhengbne]

Hi @aboveyunhai,

Background: I'm working on a timelog system where weekends should be disabled for selection on the current calendar panel.

To dynamically disable weekends on the calendar: It seems there's no way to directly access the current date range within the component. However, I can still pass all weekend days of the current month to the disabledDates prop. While this approach might not be the most efficient, it should achieve the desired result.

I'm considering adding a callback function type to the disabledDate prop. This function would accept a date object and return true if the date should be disabled or false if it should be enabled.