Form

Calendar

Full calendar built on @daypicker/react. Supports single, multiple, and range selection.

Examples

Date range

mode="range" over two months, with the picked span shown below.

January 2026

February 2026

39 lines

import { Calendar } from "@codefast/ui/calendar";
import { Card, CardContent } from "@codefast/ui/card";
import * as React from "react";

/** Structural match for @daypicker/react's DateRange (kept local to avoid a transitive import). */
interface DateRange {
  from: Date | undefined;
  to?: Date | undefined;
}

function addDays(date: Date, days: number): Date {
  const next = new Date(date);
  next.setDate(next.getDate() + days);
  return next;
}

const initialFrom = new Date(new Date().getFullYear(), 0, 12);

export function CalendarRange() {
  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
    from: initialFrom,
    to: addDays(initialFrom, 30),
  });

  return (
    <Card className="mx-auto w-fit p-0">
      <CardContent className="p-0">
        <Calendar
          mode="range"
          defaultMonth={dateRange?.from ?? initialFrom}
          selected={dateRange}
          onSelect={setDateRange}
          numberOfMonths={2}
          disabled={(date) => date > new Date() || date < new Date("1900-01-01")}
        />
      </CardContent>
    </Card>
  );
}

Basic

A basic calendar component. We used className='rounded-lg border' to style the calendar.

July 2026

5 lines

import { Calendar } from "@codefast/ui/calendar";

export function CalendarBasic() {
  return <Calendar mode="single" className="rounded-lg border" />;
}

Booked dates

A calendar component that allows users to select a date or a range of dates.

February 2026

30 lines

import { Calendar } from "@codefast/ui/calendar";
import { Card, CardContent } from "@codefast/ui/card";
import * as React from "react";

const initialDate = new Date(new Date().getFullYear(), 1, 3);

export function CalendarBookedDates() {
  const [date, setDate] = React.useState<Date | undefined>(initialDate);
  const bookedDates = Array.from({ length: 15 }, (_, i) => new Date(new Date().getFullYear(), 1, 12 + i));

  return (
    <Card className="mx-auto w-fit p-0">
      <CardContent className="p-0">
        <Calendar
          mode="single"
          defaultMonth={date ?? initialDate}
          selected={date}
          onSelect={setDate}
          disabled={bookedDates}
          modifiers={{
            booked: bookedDates,
          }}
          modifiersClassNames={{
            booked: "[&>button]:line-through opacity-100",
          }}
        />
      </CardContent>
    </Card>
  );
}

Month and Year Selector

Use captionLayout='dropdown' to show month and year dropdowns.

July 2026

5 lines

import { Calendar } from "@codefast/ui/calendar";

export function CalendarCaption() {
  return <Calendar mode="single" captionLayout="dropdown" className="rounded-lg border" />;
}

Custom Cell Size

A calendar component that allows users to select a date or a range of dates.

December 2026

57 lines

import { Calendar, CalendarDayButton } from "@codefast/ui/calendar";
import { Card, CardContent } from "@codefast/ui/card";
import * as React from "react";

/** Structural match for @daypicker/react's DateRange (kept local to avoid a transitive import). */
interface DateRange {
  from: Date | undefined;
  to?: Date | undefined;
}

function addDays(date: Date, days: number): Date {
  const next = new Date(date);
  next.setDate(next.getDate() + days);
  return next;
}

const initialFrom = new Date(new Date().getFullYear(), 11, 8);

export function CalendarCustomDays() {
  const [range, setRange] = React.useState<DateRange | undefined>({
    from: initialFrom,
    to: addDays(initialFrom, 10),
  });

  return (
    <Card className="mx-auto w-fit p-0">
      <CardContent className="p-0">
        <Calendar
          mode="range"
          defaultMonth={range?.from ?? initialFrom}
          selected={range}
          onSelect={setRange}
          numberOfMonths={1}
          captionLayout="dropdown"
          className="[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]"
          formatters={{
            formatMonthDropdown: (date) => {
              return date.toLocaleString("default", { month: "long" });
            },
          }}
          components={{
            DayButton: ({ children, modifiers, day, ...props }) => {
              const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6;

              return (
                <CalendarDayButton day={day} modifiers={modifiers} {...props}>
                  {children}
                  {!modifiers.outside && <span>{isWeekend ? "$120" : "$100"}</span>}
                </CalendarDayButton>
              );
            },
          }}
        />
      </CardContent>
    </Card>
  );
}

Multiple

Use mode=multiple to allow selecting multiple dates.

July 2026

12 lines

import { Calendar } from "@codefast/ui/calendar";
import { Card, CardContent } from "@codefast/ui/card";

export function CalendarMultiple() {
  return (
    <Card className="mx-auto w-fit p-0">
      <CardContent className="p-0">
        <Calendar mode="multiple" />
      </CardContent>
    </Card>
  );
}

Presets

A calendar component that allows users to select a date or a range of dates.

July 2026

56 lines

import { Button } from "@codefast/ui/button";
import { Calendar } from "@codefast/ui/calendar";
import { Card, CardContent, CardFooter } from "@codefast/ui/card";
import * as React from "react";

function addDays(date: Date, days: number): Date {
  const next = new Date(date);
  next.setDate(next.getDate() + days);
  return next;
}

export function CalendarWithPresets() {
  const [date, setDate] = React.useState<Date | undefined>(new Date(new Date().getFullYear(), 1, 12));
  const [currentMonth, setCurrentMonth] = React.useState<Date>(
    new Date(new Date().getFullYear(), new Date().getMonth(), 1),
  );

  return (
    <Card className="mx-auto w-fit max-w-75" size="sm">
      <CardContent>
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
          month={currentMonth}
          onMonthChange={setCurrentMonth}
          fixedWeeks
          className="p-0 [--cell-size:--spacing(9.5)]"
        />
      </CardContent>
      <CardFooter className="flex flex-wrap gap-2 border-t">
        {[
          { label: "Today", value: 0 },
          { label: "Tomorrow", value: 1 },
          { label: "In 3 days", value: 3 },
          { label: "In a week", value: 7 },
          { label: "In 2 weeks", value: 14 },
        ].map((preset) => (
          <Button
            key={preset.value}
            variant="outline"
            size="sm"
            className="flex-1"
            onClick={() => {
              const newDate = addDays(new Date(), preset.value);
              setDate(newDate);
              setCurrentMonth(new Date(newDate.getFullYear(), newDate.getMonth(), 1));
            }}
          >
            {preset.label}
          </Button>
        ))}
      </CardFooter>
    </Card>
  );
}

RTL

Right-to-left layout support for languages such as Arabic and Hebrew.

Translations are AI-generated for demonstration and may be imperfect.

يوليو 2026

أحد	اثنين	ثلاثاء	أربعاء	خميس	جمعة	سبت

43 lines

import { Calendar } from "@codefast/ui/calendar";
import { arSA, he } from "@daypicker/react/locale";
import * as React from "react";

import type { Translations } from "#/features/components-catalog/components/detail/language";
import { useTranslation } from "#/features/components-catalog/components/detail/language-context";

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {},
  },
  ar: {
    dir: "rtl",
    values: {},
  },
  he: {
    dir: "rtl",
    values: {},
  },
};

const locales = {
  ar: arSA,
  he: he,
} as const;

export function CalendarRtl() {
  const { dir, language } = useTranslation(translations, "ar");
  const [date, setDate] = React.useState<Date | undefined>(new Date());

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-lg border [--cell-size:--spacing(9)]"
      captionLayout="dropdown"
      dir={dir}
      locale={dir === "rtl" ? locales[language as keyof typeof locales] : undefined}
    />
  );
}

Date and Time Picker

A calendar component that allows users to select a date or a range of dates.

July 2026

54 lines

import { Calendar } from "@codefast/ui/calendar";
import { Card, CardContent, CardFooter } from "@codefast/ui/card";
import { Field, FieldGroup, FieldLabel } from "@codefast/ui/field";
import { InputGroup, InputGroupAddon, InputGroupInput } from "@codefast/ui/input-group";
import { Clock2Icon } from "lucide-react";
import * as React from "react";

export function CalendarWithTime() {
  const [date, setDate] = React.useState<Date | undefined>(
    new Date(new Date().getFullYear(), new Date().getMonth(), 12),
  );

  return (
    <Card size="sm" className="mx-auto w-fit">
      <CardContent>
        <Calendar mode="single" selected={date} onSelect={setDate} className="p-0" />
      </CardContent>
      <CardFooter className="border-t bg-card">
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="time-from">Start Time</FieldLabel>
            <InputGroup>
              <InputGroupInput
                id="time-from"
                type="time"
                step="1"
                defaultValue="10:30:00"
                className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
              />
              <InputGroupAddon>
                <Clock2Icon className="text-muted-foreground" />
              </InputGroupAddon>
            </InputGroup>
          </Field>
          <Field>
            <FieldLabel htmlFor="time-to">End Time</FieldLabel>
            <InputGroup>
              <InputGroupInput
                id="time-to"
                type="time"
                step="1"
                defaultValue="12:30:00"
                className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
              />
              <InputGroupAddon>
                <Clock2Icon className="text-muted-foreground" />
              </InputGroupAddon>
            </InputGroup>
          </Field>
        </FieldGroup>
      </CardFooter>
    </Card>
  );
}

Week Numbers

Use showWeekNumber to show week numbers.

February 2026

	Su	Mo	Tu	We	Th	Fr	Sa
06
07
08
09

17 lines

import { Calendar } from "@codefast/ui/calendar";
import { Card, CardContent } from "@codefast/ui/card";
import * as React from "react";

const initialDate = new Date(new Date().getFullYear(), 1, 3);

export function CalendarWeekNumbers() {
  const [date, setDate] = React.useState<Date | undefined>(initialDate);

  return (
    <Card className="mx-auto w-fit p-0">
      <CardContent className="p-0">
        <Calendar mode="single" defaultMonth={date ?? initialDate} selected={date} onSelect={setDate} showWeekNumber />
      </CardContent>
    </Card>
  );
}

Persian / Hijri / Jalali Calendar

A Persian (Jalali) calendar built with a date-fns-jalali DateLib and Eastern Arabic numerals.

خرداد ۱۴۰۴

ش	۱ش	۲ش	۳ش	۴ش	۵ش	ج

33 lines

import { Calendar } from "@codefast/ui/calendar";
import { DateLib } from "@daypicker/react";
import * as dateFnsJalali from "date-fns-jalali";
import { faIR } from "date-fns-jalali/locale";
import { useState } from "react";

/**
 * react-day-picker v10 (@daypicker/react) dropped the dedicated
 * `react-day-picker/persian` entry point. The Persian (Jalali) calendar is now
 * assembled by hand: a `DateLib` built from `date-fns-jalali` plus the
 * `dateLib` / `numerals` / `dir` / `locale` props forwarded to the calendar.
 */
const persianDateLib = new DateLib({ locale: faIR }, dateFnsJalali);

const initialDate = new Date(2025, 5, 12);

export function CalendarHijri() {
  const [date, setDate] = useState<Date | undefined>(initialDate);

  return (
    <Calendar
      mode="single"
      defaultMonth={date ?? initialDate}
      selected={date}
      onSelect={setDate}
      dateLib={persianDateLib}
      locale={faIR}
      numerals="arabext"
      dir="rtl"
      className="rounded-lg border"
    />
  );
}

Anatomy

How the parts nest — every slot the component exposes, in composition order.

Calendar

Features

Wraps @daypicker/react — every DayPicker prop is forwarded, including a custom locale/DateLib for non-Gregorian calendars.
Three selection modes — single, range, multiple — change the shape of selected/onSelect to match.
RTL-aware out of the box: chevrons and range-selection styling flip automatically under dir="rtl".
captionLayout="dropdown" swaps the plain month/year caption for month/year dropdowns; numberOfMonths renders several months side by side.

API reference

Props for each part of the component. All native element props are also forwarded.

Calendar

Wraps @daypicker/react; every DayPicker prop is forwarded.

mode"single" | "range" | "multiple"

How many dates can be selected. Changes the selected/onSelect shape.

Default"single"

selectedDate | DateRange | Date[]

Controlled selection — type depends on mode.

onSelect(value) => void

Fires with the new selection.

numberOfMonthsnumber

How many months to render side by side.

Default1

disabledMatcher | Matcher[]

Disable days (e.g. past dates, weekends).

Accessibility

Built to be keyboard-navigable and screen-reader friendly out of the box.

Key	Function
`Arrow+Right`	Moves to the next day.
`Arrow+Left`	Moves to the previous day.
`Arrow+Down`	Moves to the same weekday next week.
`Enter`	Selects the focused day.
`Page Up`	Jumps to the previous month.

Built on @daypicker/react, which implements the WAI-ARIA grid pattern.
Pair with a readout or input so the selection isn’t conveyed only by colour.
For a popover date field, mount Calendar inside a Popover with a trigger button.

Guidelines

Conventions that keep usage consistent across an app.

Show the selected date(s) in text near the calendar.
Disable invalid ranges (e.g. past dates for a booking).

Don’t

Don’t use a calendar for far-future or distant-past dates — an input is faster.
Don’t hide which dates are selectable.

Explore further

Ready to integrate?

Follow the Getting Started guide to install @codefast/ui, or browse the full component gallery.

Getting Started Browse all components

Examples

Date range

Basic

Booked dates

Month and Year Selector

Custom Cell Size

Multiple

Presets

RTL

Date and Time Picker

Week Numbers

Persian / Hijri / Jalali Calendar

Anatomy

Features

API reference

Calendar

Accessibility

Guidelines

Related