Calendar

import * as React from "react"

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

When to use it#

Use a calendar when seeing the month helps the decision: a delivery date, a booking, a report period. People can compare days, count weeks and spot weekends at a glance, which a typed date field doesn't give them.

If you only need a date in a form, the Date Picker is usually the better fit, since it keeps the calendar in a popover next to an input.

Import#

Copyimport { Calendar } from "@hel/ui/calendar"

Calendar is built on react-day-picker, so every prop of its DayPicker works here too: mode, selected, onSelect, disabled, numberOfMonths, captionLayout, startMonth, endMonth, showWeekNumber, fixedWeeks and the rest. The calendar only decides what depends on the language: locale, formatters, labels and weekStartsOn.

Examples#

Picking a range#

Set mode="range" and keep a { from, to } object in state. Two months side by side make longer stays easier to pick. The demo counts the nights, which is the usual reason to want a range.

import * as React from "react"

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

Month and year dropdowns#

For dates far from today, such as a birthday, swap the arrows for pickers with captionLayout="dropdown". Set startMonth and endMonth to bound the years, and defaultMonth so it opens near the likely answer.

import * as React from "react"

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

Limiting the dates#

disabled takes a date, a range, weekdays or a function, and you can pass a list of them. This one blocks the past, anything beyond two weeks, and weekends.

import * as React from "react"

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

Other languages#

Pass a locale and the month and weekday names, the digits, the first day of the week and the labels read by screen readers all follow it. The names come from the browser's Intl, and the dates stay on the Gregorian calendar. Right-to-left languages also need the page direction. Wrap the calendar in a DirectionProvider and set dir on its container, and the grid and its arrows mirror.

import * as React from "react"

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

Without a locale, the calendar uses the one from your Hel config, then the page's lang, then the browser's language. To show Western digits in an Arabic calendar, or the other way round, use numberingSystem, for example "latn" or "arab".

Spacing and extras#

gap sets the space between days: "none", "sm" (2px, the default), "md" (4px) or "lg" (6px). A range keeps its band unbroken behind the days whatever you pick.

showWeekNumber adds a week column. weekdayFormat controls the header names: "short" (the default), "long" or "narrow". Languages whose short names are too wide fall back to one letter.

Keyboard#

Props#

Use classNames for the parts inside it. The accessible text and the prompts of the dropdowns come from messages. English and Arabic are built in, and you can pass any of the strings to translate another language or reword one.