XDS — Design System

Calendar@xds/core v0.0.13 · XDSCalendar

Usage

Calendar lets the user pick a date or date range from a month grid. Use it in booking flows, scheduling UIs, date filters, or anywhere the user needs to see surrounding dates for context.

ts
import {XDSCalendar} from '@xds/core/Calendar'

Best practices

Guidance	Practices
Do	Set min and max dates to limit selection to a valid window — like only future dates for a booking or the current quarter for a report.
Do	Use range mode when the user needs to pick a start and end date, like a trip or a time-off request.
Do	Use dateConstraints to disable specific dates like weekends or holidays, and explain why they are unavailable.
Do	Show two months side by side when the user frequently selects dates that span a month boundary.
Don't	Use a calendar for dates far in the past or future like a birth date — a text input is faster for open-ended entry.
Don't	Disable large blocks of dates without context — the user should understand why dates are unavailable.

Examples

Common configurations, variations, and states.

Calendar — Constraints

Limit which dates can be selected using min/max bounds and custom rules like weekdays only. Use for scheduling UIs where certain dates are unavailable.

Calendar — Range

Pick a start and end date with the range highlighted between them. Use for booking dates, time-off requests, or report filters.

Calendar — Single

Pick one date from a month grid. Use for appointment dates, due dates, or any field that needs a single date.

Calendar — Two Months

Two months side by side for selecting ranges that span a month boundary. Use in booking or travel UIs where check-in and check-out often fall in different months.