Unable to use a custom Day component

[amivag]

I want to create a custom component to represent a day in the calendar, and I need help because my attempts fail.

I start by creating a CustomDayButton that will return each day as an asterisk, to make sure my component is used.
(The next step would be to be able to extract the day number, and print that with an asterisk)

Here is my code...

export function CustomDayButton({ day, modifiers, ...props }: DayButtonProps) {
  return <div>*</div>;
}

And here's how I assign it to the calendar...

<DayPicker
          components={{
            // Day: CustomCalDay, // to be implemented later
            DayButton: CustomDayButton,
          }}
...rest of the props
/>

All days show normally as numbers, not asterisks. What am I doing wrong?

PS. Currently using react-day-picker version 9.7.0
PS2. The documentation is very unclear on this topic. It would be really helpful to include a thorough example on how to provide a custom day component.

[gpbl]

@amivag thanks for your feedback! We need indeed to improve our custom components docs (see also #2118).

Could you please provide a full sample of your code, using maybe a CodeSandbox? The DayButton component is used only when a selection mode is set (via the mode prop), otherwise it will just use the Day component.

[amivag]

Thanks for your reply. Let me first show you more of the original code (because it's complex), in case you can spot the error.

First of all, here's the DayPicker

<DayPicker
	  disableNavigation={isLoading || isDisabled || isWaitingForData}
	  classNames={{
	    row: 'rdp-row cal-row', // table row
	    cell: 'rdp-cell cal-cell', // table cell
	    day: 'rdp-day cal-day', // button inside cell
	  }}
	  components={{
	    // Day: CustomDay,
	    // DayButton: CustomDayButton,
	  }}
	  animate
	  mode="single"
	  selected={selectedDate}
	  onSelect={handleDaySelect}
	  month={calendarFocusedMonth}
	  onMonthChange={handleMonthChange}
	  modifiers={calendarDayModifiers}
	  disabled={disabledDays}
	  today={currentDate || undefined}
	  showOutsideDays={false}
	  fixedWeeks={true}
	  numberOfMonths={1}
	  pagedNavigation={true}
	  startMonth={parsedMinDate || undefined}
	  endMonth={parsedMaxDate || undefined}
	  footer={
	    selectedDate ? (
	      <div className={'calendar-info-item'}>
	        <span>Selected Date:</span>{' '}
	        <span className={'strong selected-date'}>
	          {formatDateForDisplay(selectedDate)}
	        </span>
	      </div>
	    ) : currentMonthHasAvailableDays ? (
	      <div className={'calendar-info-item'}>
	        {!isLoading && !isDisabled && (
	          <span>Pick an available day</span>
	        )}
	      </div>
	    ) : null
	  }
	/>
	)}

Works perfectly. But now I want to add custom content in each day cell. (e.g. I want the day number to go into a , and then the whole thing inside a parent

container, and add an icon to the cell, depending on the day status. And I still want the enabled days to still be clickable/selectable, etc...).

I made two simple test components to try to override the day appearance.

The CustomDayButton has no effect:

export function CustomDayButton({ day, modifiers, ...props }: DayButtonProps) {
  return <div>*</div>;
}

The CustomDay, works (even though the docs insisted I use DayButton), but the props only pass in a displayMonth and a date. I don't think I have other info on the day cell, nor a way to handle actions?

function CustomDay(props) {
  const date = new Date(props?.date);
  const dayNumber = date.getUTCDate();
  return (
    <div>
      {dayNumber} *
      <div>
        <ReactJsonView src={props} />
      </div>
    </div>
  );
}

I hope this helps?

[gpbl]

@amivag I've setup a sandbox illustrating how the two components work:

https://codesandbox.io/p/sandbox/ztyshd

• there's no date prop in these components, but a day prop representing a CalendarDay. Use day.date to access the date.
• make sure that CustomDay returns a td element
• make sure that CustomDayButton returns a button element
• use children to render the content of the component (that can be either the day button itself, if in selection mode, or the formatted day)
• here is the source of DayPicker where these components are implemented - as you see, they are just passing props and attributes of the HTML element that will be rendered.

import { DayPicker } from "react-day-picker";

import "react-day-picker/style.css";

export default function App() {
  return (
    <DayPicker
      mode="single"
      components={{
        Day: CustomDay,
        DayButton: CustomDayButton,
      }}
    />
  );
}

/* Add an asterisk after the content */
function CustomDay({ day, modifiers, ...tdProps }) {
  return <td {...tdProps}>{tdProps.children} *</td>;
}

/* Add a `#` symbol after the content */
function CustomDayButton({ day, modifiers, ...buttonProps }) {
  return <button {...buttonProps}>{buttonProps.children} #</button>;
}

We will definitely update the docs for the custom components so that they can be more helpful. We actually miss some use cases and I'd love to understand better what is the design you are implementing here!

[amivag]

Thank you very much for your detailed explanation. I will check it out and try it with my project on Monday. I will get back to you with feedback.

Regarding use-cases. I am making a booking/availability calendar, and another one which shows price fluctuations on a per-day basis (uploading screenshots). I think both these examples use an older version of the DayPicker (but the API has changed since then)

[amivag]

I tested your example, and it's working well. Thank you!
(I had a configuration issue on my end which created problems, it's now fixed and everything works fine)

I have one last piece of the puzzle I need to figure out:
How do I pass custom data/functions to each day?

For example, let's say I have an object containing day stats:
{
date: "2025-05-27",
bookings: 4,
requests: 3,
pending: null,
client_ids: [171, 374]
}

I want to have this accessible in the CustomDay or CustomDayButton component, for this particular day.
Or maybe, I can pass a function getDayStats(date), so that the component can query and receive the day stats itself.
Could you provide a quick example of this as well?
(would also be a great example for the docs)

Thanks!

[gpbl]

To pass values down to components in the tree, you could create a CalendarContext and wrap the DayPicker with it.

<CalendarContext>
  <DayPicker />
</CalendarContext>

then access to the context from the custom components:

function CustomDay({ day, modifiers, ...tdProps }) {
  const calendarContext = useCalendarContext();
  const clientIds = calendarContext.getClientIds(day.date);
  return <td {...tdProps}>{tdProps.children} *</td>;
}

Contexts are supported by React itself so we can't help much here:
https://react.dev/learn/passing-data-deeply-with-context