#Calendar

The month grid for choosing a date the reader needs to see in context — a weekday, a distance from today — where DateInput is for a date they already know. It is its own popover, so compose a trigger beside it rather than wrapping it in one, and take React Aria date objects rather than a JavaScript Date.

Source · Storybook

#Usage

import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';

#Examples

#Range

A start and an end in one grid, with the span drawn between them. Two months show at once so a range crossing a boundary can be chosen without paging.

#Range with presets

CalendarPresets alongside the grid. The shipped defaults cover the ranges people actually ask for — last week, this month, last 90 days — so reach for them before writing your own.

#Range with input

CalendarInputHeader puts a typed field above the grid, so the same popover serves both a reader who knows the dates and one who needs to look.

#Range with footer

CalendarFooter holds Reset and Apply, which turns the grid into a deliberate commit — nothing changes underneath the reader until they apply it.

#Range full featured

Presets, input header and footer together, which is the shape a filter bar wants. Everything else on this page is a subset of it.

#Single with input

The typed header on a single calendar, for the same reason as the range: the reader chooses how to answer.

#Single with date time

showTime adds a time to the date, for a moment rather than a day. Ask for it only where the time genuinely changes the result.

#Single with presets

Single-date presets — today, yesterday, first of the month — which answer the questions a single date usually stands for.

#Range with disabled dates

isDateUnavailable greys out dates that cannot be chosen. Show them rather than hiding them, so the reader can see the shape of what is allowed.

#Range disallow disabled

A range refusing to span an unavailable date, which needs controlled mode. Use it where crossing the gap would produce a period the system cannot honour.

#Range controlled

Owning the value, which is what presets, Apply and disallowed spans all require — the uncontrolled form is only for the simplest case.

#Single custom presets

Your own preset list, for domain periods the defaults do not cover. Keep the labels as plain as the shipped ones.

#Range readonly

A range shown but not editable, for a period the reader needs to read back rather than change.

#Range readonly with presets

The same, with presets rendered but inert — worth seeing, because a live-looking preset that does nothing is worse than none.

#Single readonly

A single date shown but not editable.

#Props

#CalendarApplyButton

#CalendarPresetItem

#CalendarPresets

#CalendarResetButton

#CalendarTrigger