CalendarMonth

import { CalendarDate, type DateValue } from "@internationalized/date";
import { useState } from "react";
import { type RangeValue } from "react-aria-components";
import { CalendarMonth } from "@nexera-ui/react";

const october = (day: number) => new CalendarDate(2026, 10, day);

export function Range() {
  const [range, setRange] = useState<RangeValue<DateValue> | null>({
    start: october(12),
    end: october(16),
  });
  return (
    <div className="flex flex-col gap-2">
      <CalendarMonth
        selectionMode="range"
        aria-label="Leave dates"
        value={range}
        onChange={setRange}
      />
      <p className="m-0 text-body-small text-secondary">
        {range ? `${range.start.toString()} to ${range.end.toString()}` : "No dates"}
      </p>
    </div>
  );
}

import { CalendarDate, isWeekend } from "@internationalized/date";
import { CalendarMonth } from "@nexera-ui/react";

const october = (day: number) => new CalendarDate(2026, 10, day);

export function LimitsAndUnavailableDates() {
  return (
    <CalendarMonth
      selectionMode="range"
      aria-label="Working days"
      defaultFocusedValue={october(14)}
      minValue={october(5)}
      maxValue={october(28)}
      isDateUnavailable={(date) => isWeekend(date, "en-US")}
      errorMessage="Choose working days only."
    />
  );
}

import { CalendarDate } from "@internationalized/date";
import { CalendarMonth } from "@nexera-ui/react";

const october = (day: number) => new CalendarDate(2026, 10, day);

<CalendarMonth aria-label="Leave start" defaultValue={october(14)} isDisabled />;

import { CalendarDate } from "@internationalized/date";
import { I18nProvider } from "react-aria-components";
import { CalendarMonth } from "@nexera-ui/react";

const october = (day: number) => new CalendarDate(2026, 10, day);

export function German() {
  return (
    <I18nProvider locale="de-DE">
      <CalendarMonth defaultValue={october(14)} aria-label="Urlaubsbeginn" />
    </I18nProvider>
  );
}

import { CalendarDate } from "@internationalized/date";
import { CalendarMonth } from "@nexera-ui/react";

const october = (day: number) => new CalendarDate(2026, 10, day);

<CalendarMonth aria-label="بداية الإجازة" defaultValue={october(14)} />;

import { CalendarDate } from "@internationalized/date";
import { CalendarMonth } from "@nexera-ui/react";

const october = (day: number) => new CalendarDate(2026, 10, day);

export function NarrowContainer() {
  return (
    <div className="max-w-[16rem] border border-dashed border-default">
      <CalendarMonth aria-label="Leave start" defaultValue={october(14)} />
    </div>
  );
}

import { CalendarDate } from "@internationalized/date";
import { CalendarGrid, RangeCalendar } from "react-aria-components";
import { CalendarDay } from "@nexera-ui/react";

const october = (day: number) => new CalendarDate(2026, 10, day);

export function CustomGrid() {
  return (
    <RangeCalendar aria-label="Trip" defaultValue={{ start: october(12), end: october(16) }}>
      <CalendarGrid className={calendarMonthGridStyles()}>
        {(date) => <CalendarDay date={date} />}
      </CalendarGrid>
    </RangeCalendar>
  );
}