Using a custom renderer for each Day? (v8)

[amivag]

Hello,

Back in v7.x, I used the 'renderDay' prop to pass a custom renderer function for each day cell.
I am trying to migrate to v8.x now but I cannot find any concrete example on how to achieve the same thing.
Only a reference to "useDayRender" but no examples given.
Any help appreciated, thanks!

[gpbl]

@amivag what should the custom renderer do?

You can pass your own custom components:
https://react-day-picker.js.org/guides/custom-components#wrapping-the-day

[amivag]

Thank you, I was able to work with that example.
Is it possible to enrich the docs with more elaborate examples?
e.g. tweaking the content of each Day component more substantially (to showcase what is possible, the current example shows no visible difference).
Also, the outer button container, can we override that?
Thanks again!

[gpbl]

@amivag that's a valid suggestion - do you have an idea about a better example?

[amivag]

In my use case, I insert markings in specific days that contain additional data. Think of it as bookings or events in a calendar. It could be as simple as colored shapes, or icons, or marking the whole day container with a border. Something along these lines perhaps?

[ammarjmhor10]

i agree