React-dates: Highlight certain dates

[themre]

Hi,
Great lib! Currently you have blockedByDefault api, that blocks certain dates. I would like to know, if there could be some API that you could add certain styling on certain dates (e.g. for highlighting, or some other stuff). And perhaps custom tooltip would also be nice. Just like with jQuery UI, where datepicker has method beforeShowDay.

[ljharb]

Can you be more specific about your use case? Screenshots of the existing component, edited to show a mockup of what you want, would be particularly helpful.

[themre]

Sure! For example we're gathering some data and when new data arrives, we want to highlight that data, so that the user knows. But you can also pick some other date if you'd like. Example is below.

For tooltip you could also add some info inside, like for example source of data that it contains.
Also link to API of jquery UI: https://api.jqueryui.com/datepicker/#option-beforeShowDay

[Corei13]

Currently the <CalendarDay /> component renders <span className="CalendarDay__day">{day.format('D')}</span>. A renderDay prop can be added to render custom day components. It'll be also useful in use cases like this:

[majapw]

I am not super sure about overriding the renderDay method, mostly because that's something I feel like should be tightly controlled.

However, as for the original selection, I think it'd be reasonable to add something like isDayHighlighted similar to the isDayBlocked and isOutsideRange methods on the top-level to add the CalendarMonth__day--highlight class to specific days.

[themre]

no, I also wouldn't override renderDay method, perhaps adding more props would be enough (e.g. isDayHihglighted).
and for adding additional html to day (as @Corei13 pointed), you could add additionalDayHtml prop which would render if a function returned anything.