Marble UI
← Components

Mini Calendar

Preview: Default

Compact week strip: prev/next week, one toggle per day (single selection), optional dots for days with events (announced as "has events").

Import

import { MiniCalendar } from '@marbleui/ui'

Props

<MiniCalendar>

PropTypeDefaultDescription
onChange *required(d: CalendarDate) => void—
value *requiredCalendarDate—
classNamestring—
markedCalendarDate[][]

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria ToggleButton · React Aria ToggleButtonGroup. Follow the primitive's docs for the full keyboard map.

Usage notes

MiniCalendar is a one-week strip with previous/next week buttons, one button per day and a dot under days that have events. Use it above an agenda or day schedule; for a month grid use Calendar.

import { today, getLocalTimeZone } from '@internationalized/date'
const [day, setDay] = useState(today(getLocalTimeZone()))
<MiniCalendar value={day} onChange={setDay} marked={daysWithEvents} />
  • Controlled only: value (a CalendarDate) and onChange are required. marked is a CalendarDate[] of days that get a dot. There is no min or max.
  • The week starts on the locale’s first day, and the heading shows the month of that first day.
  • The days form a single-select radio group: arrow keys move, Enter or Space selects, and each day is labelled with its full date. Marked days add “, has events” to their label. The week arrows mirror in right-to-left layouts.
  • The strip follows value: setting it to a day in another week from outside, such as a “Today” button, moves the strip to that week.
Example source · show
import { useState } from 'react'
import { getLocalTimeZone, today } from '@internationalized/date'
import { MiniCalendar } from './mini-calendar'

function Demo() {
  const t = today(getLocalTimeZone())
  const [d, setD] = useState(t)
  return <MiniCalendar className="w-[22rem]" value={d} onChange={setD} marked={[t.add({ days: 1 }), t.add({ days: 3 }), t.subtract({ days: 2 })]} />
}
export const styles = { Default: Demo }

Source: packages/ui/src/mini-calendar/mini-calendar.tsx

Catalog

Category
date-time
Priority
Extra
Primitive
composed
React Aria
Calendar