Calendar · Smallest

Default

A date field that opens a one-month calendar. The trigger shows the date as “Mar 4, 2026”.

Campaign start date

Sizes

The default size is sm (36px). md is 40px.

Variants

Same surfaces as Input: primary is flat neutral-100, secondary is white with shadow-sm.

Month and year

Set navigation="dropdown" with startMonth and endMonth to jump across years.

Account created

import { Calendar, Field, FieldLabel } from "@smallest-inc/ui";

export default function CalendarDropdownNavigation() {
  return (
    <Field className="w-full max-w-xs">
      <FieldLabel>Account created</FieldLabel>
      <Calendar
        navigation="dropdown"
        startMonth={new Date(2015, 0)}
        endMonth={new Date(2030, 11)}
        placeholder="Select date"
      />
    </Field>
  );
}

Unavailable dates

Pass disabled matchers, like past dates or weekends, to block days that cannot be picked.

Schedule callback

Date range

CalendarRange picks a start and end date. sm shows one month; md shows two for faster range selection.

Presets

CalendarRangePresets adds common ranges beside the calendar. Apply commits the draft; Cancel restores the last applied range. The default preset is Last 30 days.

Custom presets

Pass presets to choose which ranges appear, and defaultPreset for the first one. fitContent sizes the trigger to its label for toolbars.

Single date with presets

Set mode="single" to pick one day, and pass single-day presets such as today and yesterday.

Date range with time

CalendarRangeTime adds start and end times. Use it only when the exact time changes the result.

Inline

CalendarView renders the calendar without a trigger, for a page or panel that always shows it.

October 2026

Best practices

When to use

Use when month and day context helps someone choose a date or range, such as a campaign start date or a billing period.
Use Input for ISO dates or relative shorthand that people commonly paste or type.

Behavior

Use Calendar for one date, CalendarRange for a range, and CalendarRangePresets when common ranges like “Last 7 days” cover most choices.
CalendarRange at size md shows two months; use it when ranges often span a month boundary.
Block impossible dates with disabled matchers, like { before: new Date() } or { dayOfWeek: [0, 6] }.
Use navigation="dropdown" with startMonth and endMonth when people need to jump across years.
Pass presets to limit the list and defaultPreset for the first one. Use mode="single" with today or yesterday presets for a single day.
Presets stage a draft: Apply commits it and Cancel restores the last applied range.
Use CalendarRangeTime only when the exact start and end times change the result.

Content

Dates read as “Mar 4, 2026”. Keep preset labels relative and short: “Last 30 days”, “Last month”.

Accessibility

Support keyboard day and month navigation, and announce completed range selections.