Custom Day component and useDayRender guide or example

[nahasco]

I want to render a custom day in the date cells. I tried using the DayContent component which is simple and nice but I can only play with the componenets inside the button wrapper and in my case I need to customise the button itself.

So maybe in some custom cases, make it disabled or render a div instead etc...

I looked everywhere for an example of a custom day implemented with the Day component and useDayRender but coulnt find any.

I hope someone can give me a simple example. I also would suggest the docs include more examples for all functions.

Thanks.

[nahasco]

Still looking for help....😀

[gpbl]

Hey @nahasco sorry for the late reply.

I agree the documentation is not clear about this part, it is going to be improved in the next weeks.

If I understand correctly, you would like to pass a custom component for rendering the button element in the day cell. You can do this by replacing the Day component with your custom component:

<DayPicker components={{ 
	Day: CustomDay  // Pass a custom component as `Day`.
  }} 
/>

The component should implement useDayRender to work correctly:

function CustomDay(props: DayProps) {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const dayRender = useDayRender(props.date, props.displayMonth, buttonRef);

  // From here returns whatever you want, but the logic should be the same:
  if (dayRender.isHidden) {
    return <div role="gridcell"></div>;
  }
  if (!dayRender.isButton) {
    return <div {...dayRender.divProps} />;
  }
  return <button {...dayRender.buttonProps}>{props.date.getDate()}</button>;
}

Here is a full working example:

https://codesandbox.io/p/sandbox/day-custom-component-h23yr7?file=%2Fsrc%2FApp.tsx%3A1%2C1-32%2C1

Does this help?

[nahasco]

Thank you this helps a lot.

One question, what does the isButton really mean? In my case I am defining whats a button and whats not in the custom day component based on some logic. What does the is isButton mean in this case?

if (!myLogic) {
            return <div></div>
}
 return <button></button>