Calendar

A calendar lays out the days of a month in a grid, and users move from month to month with the two buttons above it. Its mode sets what a press on a day selects: one day, several days or a range of days.

UsageCopy Anchor Link

"use client";

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

export function CalendarDefault() {
	return <Calendar mode="single" defaultMonth={new Date(2026, 10)} className="rounded-lg border"/>;
}

ExamplesCopy Anchor Link

Multiple SelectionCopy Anchor Link

Deliveries, store visits and stock counts rarely fall on consecutive days. With mode set to "multiple", each press on a day adds it to the selection and a second press removes it again, so users collect exactly the days they need.

Range SelectionCopy Anchor Link

A promotion or a reporting period runs from one day to another. Once mode is set to "range", users mark the period by its first and its last day, in either order, and every day between them joins the selection.

Month and Year DropdownsCopy Anchor Link

Dates far from the current month, such as the start of a lease or a stock count in a past year, take many steps with the navigation buttons. Setting captionLayout to "dropdown" lets users pick the month and the year directly, while startMonth and endMonth set the span of months on offer, which otherwise ends with the current year.

Outline NavigationCopy Anchor Link

Planning a season means stepping through many months, and users should find the buttons that change the month at a glance. Through buttonVariant set to "outline", both buttons carry the emphasis of an outline button, so users recognize them as actions in their own right.

Multiple MonthsCopy Anchor Link

A period that crosses the end of a month is hard to judge one month at a time. With numberOfMonths set to 2, users see both months at once, and each step of the navigation still moves the calendar by a single month.

Week NumbersCopy Anchor Link

Many retailers plan promotions and assortment changes by calendar week. Once showWeekNumber is on, the calendar numbers every week, following the locale or, with ISOWeek, the ISO standard.

Without Outside DaysCopy Anchor Link

By default, the days of the neighboring months complete the first and the last week, and users can select them without changing the month. Where only the days of one month count, as in a monthly plan, showOutsideDays set to false removes them, so no day of another month enters the selection by mistake.

TodayCopy Anchor Link

The business date of a store can differ from the date on the device, for example after a late closing or in another time zone. Through the today prop, the application sets the day that the calendar marks as today, so users orient themselves by the date that counts for their work.

Controlled SelectionCopy Anchor Link

Often the chosen date drives other parts of a screen, such as the delivery slots offered for that day. Together, selected and onSelect hand the selection to the application, which can preset a date, clear it or react to every change.

Controlled MonthCopy Anchor Link

A list of open orders can lead users straight to the month of the order they choose. For this purpose, month and onMonthChange let the application hold the month that the calendar shows, while the navigation buttons keep working.

Hidden NavigationCopy Anchor Link

Where the surrounding interface already switches the month, for example with a period selector in the page header, a second navigation would compete with it. In that case, hideNavigation removes the two buttons of the calendar, while users can still change the month with the keyboard.

Hidden WeekdaysCopy Anchor Link

Some choices depend on the date alone, such as the expiry date of a product. Here, hideWeekdays leaves out the row of weekday names, so the calendar needs less room.

Hidden DaysCopy Anchor Link

Days before a store opens or after a lease ends play no part in its planning. Matched by hidden, such days drop out of view, so users can't select them and keyboard focus passes over them.

Disabled NavigationCopy Anchor Link

Certain schedules cover one month only, such as the dates of a monthly stock count. With disableNavigation, users can't leave that month, neither with the buttons nor with the keyboard.

Disabled DaysCopy Anchor Link

A store that stays closed on certain days accepts no deliveries on them. Passed to disabled, a matcher such as a day of the week keeps those days in view but out of reach: users can't select them, and the arrow keys skip them.

DisabledCopy Anchor Link

While an order awaits approval, its delivery date must not change. Set to true, disabled locks every day, and users can still move between months to read the dates.

API ReferenceCopy Anchor Link

CalendarCopy Anchor Link

CalendarDayButtonCopy Anchor Link