Custom Months Navigation Component Example

[alessandrodias]

If anyone is looking for a custom months navigation example, maybe this could help.

Create the Nav component inside the <DayPicker components={} prop

<DayPicker
  mode="range"
  pagedNavigation
  numberOfMonths={2}
  components={{
    Nav: () => {
      return (
        <nav>
          <button
            type="button"
            onClick={handlePreviousClick}
            disabled={isPreviousMonthDisabled}
          >
            previous month
          </button>

          <button type="button" onClick={handleNextClick}>
            next month
          </button>
        </nav>
      );
    },
  }}
/>

Then you'll have access to the useDayPicker hook to get the previousMonth, nextMonth and goToMonth method:

const { nextMonth, previousMonth, goToMonth } = useDayPicker();

From there, you can write your own logic to handle months navigation, or to disable navigation to previous months before the current date. Here is what I had to do in my case:

// don't forget to import this to use in comparison function 
import { startOfMonth } from "date-fns";

const { nextMonth, previousMonth, goToMonth } = useDayPicker();
const [isPreviousMonthDisabled, setIsPreviousMonthDisabled] =
  useState(
    previousMonth
      ? startOfMonth(previousMonth) < startOfMonth(new Date())
      : true
  );

const handlePreviousClick = useCallback(() => {
  if (!previousMonth) return;
  goToMonth(previousMonth);
}, [previousMonth, goToMonth]);

const handleNextClick = useCallback(() => {
  if (!nextMonth) return;
  goToMonth(nextMonth);
}, [nextMonth, goToMonth]);

useEffect(() => {
  if (previousMonth) {
    setIsPreviousMonthDisabled(
      startOfMonth(previousMonth) < startOfMonth(new Date())
    );
  }
}, [previousMonth]);

Full Working Example:

// imports
import { useCallback, useEffect, useState } from "react";
import { startOfMonth } from "date-fns";
import { DayPicker, useDayPicker } from "react-day-picker";

<DayPicker
  mode="range"
  pagedNavigation
  numberOfMonths={2}
  components={{
    Nav: () => {
      const { nextMonth, previousMonth, goToMonth } = useDayPicker();
      const [isPreviousMonthDisabled, setIsPreviousMonthDisabled] =
        useState(
          previousMonth
            ? startOfMonth(previousMonth) < startOfMonth(new Date())
            : true
        );

      const handlePreviousClick = useCallback(() => {
        if (!previousMonth) return;
        goToMonth(previousMonth);
      }, [previousMonth, goToMonth]);

      const handleNextClick = useCallback(() => {
        if (!nextMonth) return;
        goToMonth(nextMonth);
      }, [nextMonth, goToMonth]);

      useEffect(() => {
        if (previousMonth) {
          setIsPreviousMonthDisabled(
            startOfMonth(previousMonth) < startOfMonth(new Date())
          );
        }
      }, [previousMonth]);

      return (
        <nav>
          <button
            type="button"
            onClick={handlePreviousClick}
            disabled={isPreviousMonthDisabled}
          >
            previous month
          </button>
          <button type="button" onClick={handleNextClick}>
            next month
          </button>
        </nav>
      );
    },
  }}
/>

You can abstract this to another component, to improve the logic and the readability.

Hope this can help someone ✌️

[alessandrodias]

Demo:

[dalvarez]

This looks great! Question: how did you get the current 2 months to render between the nav arrows in the demo example?

[dalvarez]

Ah thanks very much for the quick response!

Also curious if you had to apply changes to the month caption to have the titles of the month to show up between the nav arrows? Ive got them rendering to the side of them based of CustomComponent for Nav

[alessandrodias]

@dalvarez I customized the whole styles using a separate .css file based on the component class names. First I tried customizing it using Tailwind, but I was having some troubles with conflicting states like range_start and selected state for example.

So I ended up creating a new css file. I'll leave it in the next comment, it case it helps you or anybody else.

[dalvarez]

Ah cheers, thanks for the help!

[gpbl]

using Tailwind I was having some troubles with conflicting states like range_start and selected state for example.

👀 @alessandrodias , I'd like to know more about this - could you tell more about your issues with Tailwind? Thanks!

[alessandrodias]

@gpbl I was having issues were I needed to use ! (which converts to css !important) to overwrite the styles, specially between the selected and range-start, range-middle and range-end classes.

[alessandrodias]

The css file I used to customize the Calendar styles.

Context: I was having some troubles with Tailwind and conflicting states like range_start and selected for example, so I preferred creating and importing this css file to make it ease to customize.

.rdp-root {
  width: 100%;
  color: #3E3E3E;
}

.rdp-root .rdp-month_grid,
.rdp-root .rdp-month {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.rdp-root .rdp-weekdays {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.rdp-root .rdp-weeks {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.rdp-root .rdp-week {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.rdp-root .rdp-month .rdp-month_caption {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  user-select: none;
}

.rdp-root .rdp-today:not(.rdp-outside) {
  color: #3E3E3E;
}

.rdp-root .rdp-day {
  flex: 1;
  width: auto;
  height: 32px;
  font-size: 14px;
  font-weight: 400;
}

.rdp-root .rdp-day.rdp-disabled .rdp-day_button {
  opacity: 35%;
  background-color: #FFF;
}

.rdp-root .rdp-day .rdp-day_button {
  background: #EBEBEB70;
  border-radius: 0;
  border: 0;
  width: 100%;
  height: 100%;
}

.rdp-root .rdp-day.rdp-selected .rdp-day_button,
.rdp-root .rdp-day.rdp-range_start .rdp-day_button,
.rdp-root .rdp-day.range_end .rdp-day_button {
  background-color: #19398A;
  color: #FFF;
  border: 0;
}

.rdp-root .rdp-day.rdp-range_middle .rdp-day_button {
  background: #E5ECF9 !important;
  color: #5893EC !important;
  border: 0;
}

@media (min-width: 640px) {
  .rdp-root .rdp-month_grid,
  .rdp-root .rdp-month {
    width: 240px;
  }

  .rdp-root .rdp-day {
    height: 40px;
  }
}

[gpbl]

@alessandrodias thanks so much for your dive into the custom components.

We are looking for more examples to include in the documentation and I was interested in your use case.

to disable navigation to previous months before the current date. Here is what I had to do in my case:

I have a question - isn't that the same when using startMonth and endMonth props? These props do disable the navigation buttons when the month cannot be navigated to: https://daypicker.dev/docs/navigation#start-and-end-dates

<DayPicker startMonth={new Date(2024, 0)} endMonth={new Date(2025, 11)} />

Or I am wondering is just an example you wanted to provide here? 🤔

[alessandrodias]

Hi @gpbl thanks for reaching out 😃

In my use case, i needed to set the go date and return date for a trip, and there were some rules:

• The go date and return date can only be in a maximum of 12 months ahead;
• The go date can't be before today;
• The return date can't be before the go date;
• The go date can't be after the return date;
• The go date is required and the return date is optional;

So, when I previously used the startMonth and endMonth props, I had a problem: when selecting the return Date the next month disappeared, as you can see in the media attached bellow.

CleanShot.2024-09-09.at.09.52.33.mp4

Besides of this, I had to customize the left and right arrows to match the UI we had, and also set the title for next next and previous buttons because of accessibility issues.

[alessandrodias]

Continuing...

What I did was:

• I didn't used the startMonth and endMonth props;

• I used the disabled prop with before and after like this:

disabled={
  before: disabled?.before ?? currentDate,
  after: disabled?.after ?? date12MonthsAhead,
}

• I let the uses keep navigating the months ahead, but the dates were disabled after 12 months in the future;

CleanShot.2024-09-09.at.10.09.39.mp4