Calendar

A grid for picking a date, several dates, or a range.

July 2026

Usage

import { Calendar } from '@appica/ui-react/calendar'

<Calendar mode="single" selected={date} onSelect={setDate} />

Calendar wraps react-day-picker's DayPicker, styled with Appica tokens and an added size prop. Set mode to choose the selection behavior, then drive the value with selected + onSelect (or omit both for an uncontrolled calendar). It defaults to Monday-first weeks and dropdown month/year navigation.

Examples

Single date

The most common setup — mode="single" with a Date | undefined state.

July 2026

'use client'

import * as React from 'react'
import { Calendar } from '@appica/ui-react/calendar'

export default function CalendarSingle() {
  const [date, setDate] = React.useState<Date | undefined>(new Date())

  return <Calendar mode="single" selected={date} onSelect={setDate} />
}

Date range

mode="range" selects a contiguous span. The value is a DateRange ({ from, to }); the start, middle, and end days are styled as one block.

July 2026

'use client'

import * as React from 'react'
import { Calendar, type DateRange } from '@appica/ui-react/calendar'

export default function CalendarRange() {
  const [range, setRange] = React.useState<DateRange | undefined>(() => {
    const from = new Date()
    const to = new Date()
    to.setDate(to.getDate() + 5)
    return { from, to }
  })

  return <Calendar mode="range" selected={range} onSelect={setRange} />
}

Multiple dates

mode="multiple" collects an array of dates — click to add, click again to remove.

July 2026

'use client'

import * as React from 'react'
import { Calendar } from '@appica/ui-react/calendar'

export default function CalendarMultiple() {
  const [days, setDays] = React.useState<Date[] | undefined>(() => {
    const base = new Date()
    return [10, 15, 22].map((d) => new Date(base.getFullYear(), base.getMonth(), d))
  })

  return <Calendar mode="multiple" selected={days} onSelect={setDays} />
}

Disabled dates

disabled accepts any react-day-picker Matcher — a date, a range, a set of weekdays, or a predicate. Disabled days are struck through and can't be selected. This example blocks every weekend.

July 2026

import { Calendar } from '@appica/ui-react/calendar'

export default function CalendarDisabled() {
  return <Calendar mode="single" disabled={{ dayOfWeek: [0, 6] }} />
}

Sizes

The size prop scales the cell size and text. captionLayout="label" swaps the month/year dropdowns for a static label with arrow navigation.

July 2026

import { Calendar } from '@appica/ui-react/calendar'

const sizes = ['sm', 'md', 'lg'] as const

export default function CalendarSizes() {
  return (
    <div className="flex flex-wrap items-start justify-center gap-6">
      {sizes.map((size) => (
        <Calendar key={size} mode="single" size={size} captionLayout="label" />
      ))}
    </div>
  )
}

RTL

Every Appica UI component supports right-to-left layouts out of the box. Set the dir attribute on a container (commonly your <html> element) so CSS logical properties resolve correctly, and wrap your tree in DirectionProvider so direction-aware behavior — roving focus, popup placement, and the like — follows the same direction.

import { DirectionProvider } from '@appica/ui-react/providers/direction-provider'

export default function RootLayout({ children }) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <DirectionProvider dir="rtl">{children}</DirectionProvider>
      </body>
    </html>
  )
}

For setup details and caveats, see the RTL guide.

July 2026

API reference

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Cell size and text scale (Appica extension).
`mode`	`'single' \| 'multiple' \| 'range'`	—	Selection behavior. Omit for a display-only calendar.
`selected`	`Date \| Date[] \| DateRange`	—	Controlled selection; the shape matches `mode`. Pair with `onSelect`.
`onSelect`	`(value, triggerDate, modifiers, event) => void`	—	Fires when the selection changes.
`captionLayout`	`'dropdown' \| 'dropdown-months' \| 'dropdown-years' \| 'label'`	`'dropdown'`	Month/year header: select dropdowns, or a static label with arrows.
`showOutsideDays`	`boolean`	`true`	Render days from the adjacent months.
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`1` (Mon)	First day of the week.
`numberOfMonths`	`number`	`1`	How many months to display.
`month`	`Date`	—	Controlled displayed month. Pair with `onMonthChange`.
`onMonthChange`	`(month: Date) => void`	—	Fires when the user navigates to another month.
`defaultMonth`	`Date`	current month	Uncontrolled initial month to display.
`startMonth` / `endMonth`	`Date`	`1925` / `2050`	Bounds of the navigable range.
`disabled`	`Matcher`	—	Dates that can't be selected (a date, range, weekday set, or predicate).
`required`	`boolean`	`false`	Prevent clearing the selection by re-clicking the selected day.
`className`	`string`	—	Extra classes on the root, merged via `tailwind-merge`.

Calendar forwards every other DayPicker prop — modifiers/modifiersClassNames, formatters/labels, dir, mode-specific options, and more — straight through. See the react-day-picker docs for the full API.

Accessibility

Renders a role="grid" of day buttons; selected days expose aria-selected, and the current day is marked today.
←/→/↑/↓ move between days, Page Up/Down change months, and Enter/Space select — react-day-picker's full keyboard model.
The previous/next buttons and the month/year dropdowns carry accessible labels.
Disabled days are removed from selection and the pointer, and are visually struck through.
Day hover/press transitions are wrapped in motion-reduce: variants, so they're skipped when the user prefers reduced motion.

Mo	Tu	We	Th	Fr	Sa	Su

Mo	Tu	We	Th	Fr	Sa	Su

Mo	Tu	We	Th	Fr	Sa	Su

Mo	Tu	We	Th	Fr	Sa	Su

Mo	Tu	We	Th	Fr	Sa	Su

Actions & Inputs

Data Display

Decoration & Effects

Layout

Menus

Navigation

Overlays

Status & Feedback

Calendar

Usage

Examples

Single date

Date range

Multiple dates

Disabled dates

Sizes

RTL

API reference

Accessibility