apx-dsv0.1Local renderer · live
K
Foundations4
  • Getting started
  • Theming
  • Templates
  • Icons
  • Avatar
  • Badge
  • DataGrid
  • Scheduler
  • Stat
  • Table
  • Timeline
  • TreeView
  • Accordion
  • Alert
  • EmptyState
  • Progress
  • Skeleton
  • Spinner
  • SplashScreen
  • Toast
  • ColorPicker
  • FileUpload
  • Form
  • Rating
  • TagsInput
  • Combobox
  • Field
  • Select
  • Toggle
  • Button
  • Calendar
  • Checkbox
  • DatePicker
  • Input
  • NumberInput
  • Radio
  • Slider
  • Switch
  • Textarea
  • AppShell
  • Div
  • Divider
  • Sidebar
  • Stack
  • Typography
  • Image
  • Breadcrumbs
  • Carousel
  • NavigationMenu
  • Pagination
  • Stepper
  • Tabs
  • Toolbar
  • CommandPalette
  • Confirm
  • Drawer
  • HoverCard
  • Menu
  • Modal
  • Popover
  • Tooltip
  • Icon
  • Card
  • PricingCard
60 componentsapx-ds/renderer
Calendar
Variant↳ other

Inputs

Calendar

Headless + DOM date primitive. Powers

Overview

<Calendar /> is the canonical date primitive in apx-ds — a headless + DOM root for date selection that powers <DatePicker>, <DateRangePicker>, and scheduler mini-month widgets. It supports single, multiple, and range modes, locale-aware weekday and month labels, keyboard navigation, and constraint props (min, max, isDateDisabled).

Overview — single-date selection with min/max bounds

Loading preview…
Overview.tsx

Selection modes

  • single — one date at a time. The default for date pickers and booking flows.
  • multiple — toggle individual dates on and off. Useful for availability or tag-style date lists.
  • range — pick a start and end date. Pass numberOfMonths={2} for a side-by-side range picker.

Every mode is fully controllable (value + month) or uncontrolled (defaultValue + defaultMonth).

Variants

Four surface styles for embedding in popovers, sidebars, or inline layouts:

  • solid — filled background. Default.
  • outline — bordered frame. Pairs well with popover shells.
  • soft — subtle tint without a hard edge.
  • minimal — chromeless grid. For dense inline calendars.

Examples

Basic — single-date selection

Loading preview…
Basic.tsx

Range — two-month range picker

Loading preview…
Range.tsx

Multiple — toggle many dates

Loading preview…
Multiple.tsx

Min / max — bounded selection window

Loading preview…
MinMax.tsx

Disable weekends — custom isDateDisabled

Loading preview…
DisableWeekends.tsx

Variants — solid / outline / soft / minimal

Loading preview…
Variants.tsx

Sizes — sm / md / lg

Loading preview…
Sizes.tsx

Week numbers — ISO week gutter

Loading preview…
WeekNumbers.tsx

Locales — en-US / de-DE / ja-JP

Loading preview…
Locales.tsx

Custom day render — event dots via renderDay

Loading preview…
CustomDayRender.tsx

Props

PropTypeDefaultDescription
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.
classNamestring——
colorResponsiveValue<CalendarColor>——
defaultMonthDate`new Date()`Uncontrolled initial visible month.
defaultValueDate | Date[] | DateRange | null—Uncontrolled initial value.
fixedWeeksbooleanfalseAlways render 6 rows (prevents layout shift across months).
isDateDisabled((d: Date) => boolean)—Arbitrary predicate — return `true` to disable the day. Combined OR with `min`/`max`.
localestring—BCP-47 locale — drives weekday/month names + first-day-of-week.
maxDate—Hard upper bound (inclusive).
minDate—Hard lower bound (inclusive).
modeenum'single'Selection mode.
monthDate—Controlled visible month anchor.
numberOfMonthsnumber1 (DatePicker: 1, DateRangePicker: 2)How many months to render side-by-side.
onChange((value: Date | Date[] | DateRange | null) => void)—Fires on any selection mutation. Payload shape mirrors `mode`.
onDayHover((d: Date) => void)—Per-day hover — critical for the range preview UX.
onDayLeave(() => void)—Per-day pointer-leave — clears hover preview.
onMonthChange((d: Date) => void)—Fires whenever the visible month changes (nav buttons, year jump, keyboard).
renderDay((ctx: RenderCalendarDayContext) => ReactNode)—Replace the inner contents of every day cell. The default renders the day number.
renderHeader((ctx: RenderCalendarHeaderContext) => ReactNode)—Replace the entire header row (title + nav buttons).
renderWeekday((ctx: RenderCalendarWeekdayContext) => ReactNode)—Replace the weekday label cell (Mon / Tue / …).
showOutsideDaysbooleantrueDim days that spill over from prev/next month.
showWeekNumbersbooleanfalseShow the ISO week number column on the leading side.
sizeResponsiveValue<CalendarSize>——
styleCSSProperties——
sxSx——
translationsPartial<CalendarTranslations>—Replace any subset of the default English strings. Merged with `<I18nProvider>`.
valueDate | Date[] | DateRange | null—Controlled value. Pair with `onChange`.
variantResponsiveValue<CalendarVariant>——
weekStartsOnenum—Override the locale-driven first day of week (0 = Sun … 6 = Sat).

Accessibility

  • Renders an ARIA grid with gridcell day buttons — arrow keys, Home/End, PageUp/Down, and Enter/Space follow the W3C Date Picker Dialog keyboard pattern.
  • Disabled and out-of-range dates are not focusable and expose aria-disabled.
  • Navigation buttons in the header have accessible labels derived from locale-aware month titles.
  • Week-number gutters are decorative when shown; day cells carry the selectable semantics.

Do / Don't

  • Do pair min / max with visible helper text so users know why dates are disabled.
  • Do use locale to drive weekday order and month names — no locale data ships with the DS.
  • Don't rebuild keyboard navigation in renderDay — the headless layer owns selection and focus; the slot only swaps visuals.
  • Don't use Calendar for time-of-day picking — it is date-only; reach for a time input or datetime picker instead.