Calendar

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

September 2026

"use client";

import { Calendar } from "mako-ui/components/calendar";
import * as React from "react";

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

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

Usage

import { Calendar } from "mako-ui/components/calendar"

<Calendar />

API Reference

This component wraps DayPicker (@daypicker/react) 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 DayPicker 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

September 2026

"use client";
import { Calendar } from "mako-ui/components/calendar";
import * as React from "react";

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

September 2026

"use client";

import type { DateRange } from "@daypicker/react";
import { Calendar } from "mako-ui/components/calendar";
import * as React from "react";

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:

September 2026

"use client";
import { Calendar } from "mako-ui/components/calendar";
import * as React from "react";

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:

September 2026

"use client";
import type { DropdownProps } from "@daypicker/react";
import { Calendar } from "mako-ui/components/calendar";
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "mako-ui/components/select";
import * as React from "react";

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
      items={items}
      onValueChange={handleValueChange}
      value={value?.toString()}
    >
      <SelectTrigger className="min-w-none" aria-label={ariaLabel}>
        <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:

September 2026

"use client";
import type { DropdownProps } from "@daypicker/react";
import { Calendar } from "mako-ui/components/calendar";
import {
  Combobox,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
} from "mako-ui/components/combobox";
import * as React from "react";

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
      autoHighlight
      items={items}
      onValueChange={handleValueChange}
      value={selectedItem}
    >
      <ComboboxInput
        aria-label={ariaLabel}
        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

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