DateRangePicker(react-aria-components): How to show several months?

[aspirisen]

Hello, I am trying react aria components and I am curious if it is possible to have several months like spectrum?

I have something similar by using <RangeCalendar visibleDuration={{ months: 2 }}> and two CalendarGrids where the second one is <CalendarGrid offset={{ months: 1 }}>. In general it works but I can't make it to show month name per each calendar because it is using one single <Heading />

P.S. I know that it is is alpha and it is not supposed to support everything that spectrum can, just wanted to try aria components

[EnderWolf50]

I want to know this as well! Maybe some render props? 👀

[devongovett]

https://react-spectrum.adobe.com/react-aria/RangeCalendar.html#multi-month

[jrmyio]

Is there any way to have the headers seperately? Showing a header like 'september–november 2024' means the user has to figure out which calendargrid belongs to which month. I find this pretty unintuitive.

[danielgavrilov]

Did you figure this out by any chance?

[ghost]

I need to do the same. Do you had any success?

[GustavoSmith]

Hey guys, in this case (or any other scenario when you want a custom heading for the Calendar component) you need to create two custom components. One of them should be a hook for providing the custom heading and the other one should consume this hook in order to access the context required to make it work. Example:

video.mp4

"use client";

import { useContext, useMemo, useState } from "react";
import type { Dispatch, SetStateAction } from "react";

import { getLocalTimeZone, today } from "@internationalized/date";
import { format } from "date-fns";
import { es } from "date-fns/locale";
import type { DateValue } from "react-aria-components";
import {
  Button,
  CalendarCell,
  CalendarGrid,
  CalendarGridBody,
  CalendarGridHeader,
  CalendarHeaderCell,
  Dialog,
  DialogTrigger,
  Popover,
  RangeCalendar,
  RangeCalendarStateContext,
} from "react-aria-components";

function DatePickerFilterButton({
  calendarValue,
  setCalendarValue,
}: {
  calendarValue: { start: DateValue; end: DateValue } | undefined;
  setCalendarValue: Dispatch<
    SetStateAction<{ start: DateValue; end: DateValue } | undefined>
  >;
}) {
  const now = today(getLocalTimeZone());
  
  // You need this hook for providing the label you want to show.
  // In my case, I use date-fns for the formatting. And it's in Spanish also lol
  
  function useVisibleMonthTexts() {
    const state = useContext(RangeCalendarStateContext);
    return useMemo(() => {
      if (!state)
        return {
          firstMonthText: "",
          secondMonthText: "",
        };
      const firstMonth = state.visibleRange.start;
      const firstMonthText = format(
        firstMonth.toDate(state.timeZone),
        "LLLL yyyy",
        { locale: es },
      );
      
      // You could be smarter here and do a component that infers the visibleDuration attribute.
      // Here I'll just assume it's visibleDuration={{ months: 2 }}
      
      const secondMonth = firstMonth.add({ months: 1 });
      const secondMonthText = format(
        secondMonth.toDate(state.timeZone),
        "LLLL yyyy",
        { locale: es },
      );
      return { firstMonthText, secondMonthText };
    }, [state]);
  }

  // By creating this extra component and consuming the hook, I'm able to read the context correctly
  
  function RangeCalendarContent() {
    const { firstMonthText, secondMonthText } = useVisibleMonthTexts();
    return (
      <section className="flex gap-12 text-white">
        <div className="flex flex-col items-center gap-5">
          <div className="flex w-full items-center justify-between">
            <Button
              className="size-7 text-black flex-none rounded-full outline-none"
              slot="previous"
            >
              {`<-`}
            </Button>
            <h2 className="flex-1 text-center text-xl/7 font-medium capitalize">
              {firstMonthText}
            </h2>
          </div>
          <CalendarGrid weekdayStyle="short" className="overflow-hidden">
            <CalendarGridHeader className="bg-[#3E66B2] px-3 py-2">
              {(day) => (
                <CalendarHeaderCell className="m-auto size-7 px-5 font-semibold uppercase first:rounded-l last:rounded-r">
                  {day}
                </CalendarHeaderCell>
              )}
            </CalendarGridHeader>
            <CalendarGridBody>
              {(date) => (
                <CalendarCell
                  className="mx-auto my-2.5 flex size-7 items-center justify-center rounded-full p-px text-center outline-none aria-disabled:text-neutral-300"
                  date={date}
                />
              )}
            </CalendarGridBody>
          </CalendarGrid>
        </div>
        <div className="flex flex-col items-center gap-5">
          <div className="flex w-full items-center justify-between">
            <h2 className="flex-1 text-center text-xl/7 font-medium capitalize">
              {secondMonthText}
            </h2>
            <Button
              className="size-7 text-black flex-none rounded-full outline-none"
              slot="next"
            >
              {`->`}
            </Button>
          </div>
          <CalendarGrid weekdayStyle="short" offset={{ months: 1 }}>
            <CalendarGridHeader className="bg-[#3E66B2] px-3 py-2">
              {(day) => (
                <CalendarHeaderCell className="m-auto size-7 px-5 font-semibold uppercase first:rounded-l last:rounded-r">
                  {day}
                </CalendarHeaderCell>
              )}
            </CalendarGridHeader>
            <CalendarGridBody>
              {(date) => (
                <CalendarCell
                  className="mx-auto my-2.5 flex size-7 items-center justify-center rounded-full p-px text-center outline-none aria-disabled:text-neutral-300"
                  date={date}
                />
              )}
            </CalendarGridBody>
          </CalendarGrid>
        </div>
      </section>
    );
  }
  return (
    <DialogTrigger>
      <Button>Calendar</Button>
      <Popover className="flex flex-col items-center justify-center rounded bg-blue-500 text-white shadow-lg outline-none">
        <Dialog className="outline-none">
          {({ close }) => (
            <RangeCalendar
              maxValue={now}
              isDateUnavailable={(date) => date.compare(now) > 0}
              value={calendarValue}
              onChange={(newRange) => {
                if (newRange) {
                  setCalendarValue({
                    start: newRange.start,
                    end: newRange.end,
                  });
                }
                close();
              }}
              visibleDuration={{ months: 2 }}
              pageBehavior="single"
              className="flex flex-col items-center justify-center gap-6 p-6"
            >
              <RangeCalendarContent />
            </RangeCalendar>
          )}
        </Dialog>
      </Popover>
    </DialogTrigger>
  );
}

export default function Home() {
  const [calendarValue, setCalendarValue] = useState<
    | {
        start: DateValue;
        end: DateValue;
      }
    | undefined
  >(undefined);
  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <h1 className="text-4xl font-bold">Example</h1>
      <DatePickerFilterButton
        calendarValue={calendarValue}
        setCalendarValue={setCalendarValue}
      />
    </div>
  );
}

Let me know if it helps!

[snowystinger]

Thanks, I referenced this today. I think it can be simplified, depending on the need. The h2 is aria-hidden, so we don't need to worry about Screen Reader navigation nor announcement for these.

With that knowledge, we can create whatever we want inside the Heading, which means we can keep most of this https://react-spectrum.adobe.com/react-aria/Calendar.html#multi-month and only split out the Heading into another component so we can access the context.

Maybe I can make a case for making this easier now though.

const CalendarHeading = () => {
  let {visibleRange, timeZone} = useContext(CalendarStateContext) ?? {};
  let era: any = getEraFormat(visibleRange?.start) || getEraFormat(visibleRange?.end); // need to export from internationalized, or is there another way?
  let monthFormatter = useDateFormatter({
    month: 'long',
    year: 'numeric',
    era,
    calendar: visibleRange?.start.calendar.identifier,
    timeZone
  });
  let months = useMemo(() => {
    if (!visibleRange) {
      return [];
    }
    let months: string[] = [];
    for (let i = visibleRange.start; i.compare(visibleRange.end) <= 0; i = i.add({months: 1})) {
      // TODO: account for the first week possibly overlapping, like with a custom 454 calendar.
      // What's a better way to handle this math...?
      if (i.month === visibleRange.start.month) {
        i = i.add({weeks: 1});
      }
      months.push(monthFormatter.format(i.toDate(timeZone!)));
    }
    return months;
  }, [visibleRange, monthFormatter, timeZone]);

  return (
    <Heading>
      {months.map((month, i) => {
        if (i === 0) {
          return (
            <Fragment key={month}>
              <div>{month}</div>
            </Fragment>
          );
        } else {
          return (
            <Fragment key={month}>
              <div className={style({visibility: 'hidden', width:  next.width + prev.width+gap})} role="presentation" />
              <div>{month}</div>
            </Fragment>
          );
        }
      })}
    </Heading>
  );
};

[SutuSebastian]

I ended up using the render-props value of RangeCalendar:

<RangeCalendar>
  {({ state }) => <div>...</div>}
</RangeCalendar>

and used state.visibleRange.start and state.visibleRange.end to build it from the ground up.