React-calendar: Disable specific dates

[andymj]

Hi!, I would like to disable specific dates passing an array of the dates to a prop, see the example below. Any advice on where or how to accomplish this?

const disabledDates = ['08/04/2020', '08/08/2020', '08/15/2020'];

<Calendar 
  ...props, 
  disabledDates={disabledDates}
/> 

Thanks!

[wojtekmaj]

Check out tileDisabled prop. That's exactly what you want, but in order for more flexibility, you'll need to write this function yourself so that it would return true for matching dates.

[andymj]

Thanks for your reply @wojtekmaj , I was able to implement the callback to disable/enable specific dates. Are there gonna be any updates to the component in the future to support a prop like the one I described? or it will be the way you mentioned with passing a callback to tileDisable prop?

[wojtekmaj]

I'm not planning to introduce a second prop that does roughly the same thing. I understand the need for simplicity, but adding a second prop would make it all more confusing. What if both are given? 😅

If I was to make it simpler, I would rather come up with something like react-calendar-utils which would be a separate library that makes it easier to make these kinds of functions using provided helpers: disableDates, disableBefore, disableAfter, disableAllExcluding, etc. :)

[zamiramiludin]

Thanks for your reply @wojtekmaj , I was able to implement the callback to disable/enable specific dates. Are there gonna be any updates to the component in the future to support a prop like the one I described? or it will be the way you mentioned with passing a callback to tileDisable prop?

I really hope if you can share your code. it really helps. Thank you.

[wojtekmaj]

https://github.com/wojtekmaj/react-calendar/wiki/Recipes#selectively-disable-tiles