Calendar

A date picker component with range and multi-select support.

February 2026

"use client";

import * as React from "react";

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

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

  return <Calendar mode="single" onSelect={setDate} selected={date} />;
}

Installation


pnpm dlx shadcn@latest add @coss/calendar

Usage

import { Calendar } from "@/components/ui/calendar"

<Calendar />

API Reference

This component wraps react-day-picker with custom styling.

Calendar

A calendar component for date selection.

Prop	Type	Default	Description
`mode`	`"single" \| "multiple" \| "range"`	`"single"`	Selection mode for the calendar
`captionLayout`	`"label" \| "dropdown" \| "dropdown-months" \| "dropdown-years"`	`"label"`	Caption layout - use `"dropdown"` for month/year dropdowns
`selected`	`Date \| Date[] \| DateRange`	-	The selected date(s)
`onSelect`	`(date: Date \| Date[] \| DateRange) => void`	-	Callback when date selection changes
`showOutsideDays`	`boolean`	`true`	Show days from adjacent months
`startMonth`	`Date`	-	First month to show in dropdown navigation
`endMonth`	`Date`	-	Last month to show in dropdown navigation
`buttonVariant`	`"ghost" \| "outline" \| ...`	`"ghost"`	Button variant for navigation buttons
`classNames`	`object`	-	Custom class names for calendar parts
`components`	`object`	-	Custom components to override defaults

For the full list of props, see the react-day-picker documentation.

Customizing Cell Size

The calendar uses CSS custom properties for cell sizing. By default, the cell size is --spacing(9) on mobile and --spacing(8) on larger screens:

[--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)]

You can customize the cell size by passing a custom className:

<Calendar className="[--cell-size:--spacing(11)]" />

Or use responsive values:

<Calendar className="[--cell-size:--spacing(11)] sm:[--cell-size:--spacing(10)]" />

Examples

Single Date Selection

February 2026

"use client";
import * as React from "react";

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

export default function Particle() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());
  return (
    <Calendar
      className="[--cell-size:--spacing(11)] sm:[--cell-size:--spacing(10)]"
      mode="single"
      onSelect={setDate}
      selected={date}
    />
  );
}

Date Range Selection

February 2026

"use client";

import * as React from "react";
import type { DateRange } from "react-day-picker";

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

export default function Particle() {
  const [range, setRange] = React.useState<DateRange | undefined>({
    from: new Date(),
    to: new Date(new Date().setDate(new Date().getDate() + 7)),
  });

  return <Calendar mode="range" onSelect={setRange} selected={range} />;
}

Use captionLayout="dropdown" with startMonth and endMonth to enable month/year dropdown navigation:

February 2026

"use client";
import * as React from "react";

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

export default function Particle() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());
  return (
    <Calendar
      captionLayout="dropdown"
      endMonth={new Date(2030, 11)}
      mode="single"
      onSelect={setDate}
      selected={date}
      startMonth={new Date(1930, 0)}
    />
  );
}

Calendar with a custom Select component for month and year navigation:

February 2026

"use client";
import * as React from "react";
import type { DropdownProps } from "react-day-picker";

import { Calendar } from "@/components/ui/calendar";
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

function CalendarDropdown(props: DropdownProps) {
  const { options, value, onChange, "aria-label": ariaLabel } = props;

  const handleValueChange = (newValue: string | null) => {
    if (onChange && newValue) {
      const syntheticEvent = {
        target: { value: newValue },
      } as React.ChangeEvent<HTMLSelectElement>;
      onChange(syntheticEvent);
    }
  };

  const items =
    options?.map((option) => ({
      disabled: option.disabled,
      label: option.label,
      value: option.value.toString(),
    })) ?? [];

  return (
    <Select
      aria-label={ariaLabel}
      items={items}
      onValueChange={handleValueChange}
      value={value?.toString()}
    >
      <SelectTrigger className="min-w-none">
        <SelectValue />
      </SelectTrigger>
      <SelectPopup>
        {items.map((item) => (
          <SelectItem
            disabled={item.disabled}
            key={item.value}
            value={item.value}
          >
            {item.label}
          </SelectItem>
        ))}
      </SelectPopup>
    </Select>
  );
}

export default function Particle() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());
  return (
    <Calendar
      captionLayout="dropdown"
      components={{ Dropdown: CalendarDropdown }}
      endMonth={new Date(2030, 11)}
      mode="single"
      onSelect={setDate}
      selected={date}
      startMonth={new Date(1930, 0)}
    />
  );
}

Calendar with a searchable Combobox for month and year navigation:

February 2026

"use client";
import * as React from "react";
import type { DropdownProps } from "react-day-picker";

import { Calendar } from "@/components/ui/calendar";
import {
  Combobox,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
} from "@/components/ui/combobox";

interface DropdownItem {
  disabled?: boolean;
  label: string;
  value: string;
}

function CalendarDropdown(props: DropdownProps) {
  const { options, value, onChange, "aria-label": ariaLabel } = props;

  const items: DropdownItem[] =
    options?.map((option) => ({
      disabled: option.disabled,
      label: option.label,
      value: option.value.toString(),
    })) ?? [];

  const selectedItem = items.find((item) => item.value === value?.toString());

  const handleValueChange = (newValue: DropdownItem | null) => {
    if (onChange && newValue) {
      const syntheticEvent = {
        target: { value: newValue.value },
      } as React.ChangeEvent<HTMLSelectElement>;
      onChange(syntheticEvent);
    }
  };

  return (
    <Combobox
      aria-label={ariaLabel}
      autoHighlight
      items={items}
      onValueChange={handleValueChange}
      value={selectedItem}
    >
      <ComboboxInput
        className="**:[input]:w-0 **:[input]:flex-1"
        onFocus={(e) => e.currentTarget.select()}
      />
      <ComboboxPopup aria-label={ariaLabel}>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item: DropdownItem) => (
            <ComboboxItem
              disabled={item.disabled}
              key={item.value}
              value={item}
            >
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  );
}

export default function Particle() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());
  return (
    <Calendar
      captionLayout="dropdown"
      components={{ Dropdown: CalendarDropdown }}
      endMonth={new Date(2030, 11)}
      mode="single"
      onSelect={setDate}
      selected={date}
      startMonth={new Date(1930, 0)}
    />
  );
}

On This Page

Installation Usage API Reference Calendar Customizing Cell Size Examples Single Date Selection Date Range Selection Dropdown Navigation Select Dropdown for Month/Year Combobox Dropdown for Month/Year

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa