Calendar

Date picker calendar for selecting dates.

import { Calendar } from "@ninna-ui/data-display"

pnpm add @ninna-ui/data-display

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Calendar component in your application.

import { Calendar } from "@ninna-ui/data-display";

export default function Example() {
  return (
    <Calendar className="w-[280px] rounded-lg border border-base-200" />
  );
}

Basic

A basic calendar with default settings.

March 2026

Controlled

Track the selected date with React state.

March 2026

Selected: 3/9/2026

Min/Max Dates

Restrict the selectable date range.

March 2026

Monday Start

Start the week on Monday instead of Sunday.

March 2026

API Reference

Complete list of props for the Calendar component.

Calendar

Prop	Type	Default	Description
`aria-label`	`string`	`'Calendar'`	Accessible label for the calendar widget
`value`	`Date`	-	Selected date (controlled)
`defaultValue`	`Date`	-	Default selected date (uncontrolled)
`onValueChange`	`(date: Date) => void`	-	Callback when selected date changes
`minDate`	`Date`	-	Minimum selectable date
`maxDate`	`Date`	-	Maximum selectable date
`disabledDates`	`Date[]`	-	Array of dates to disable
`showOutsideDays`	`boolean`	`true`	Show days from adjacent months
`weekStartsOn`	`0 \| 1`	`0`	First day of week (0=Sunday, 1=Monday)
`className`	`string`	-	Additional CSS classes

Accessibility

Uses a grid role with proper row/cell structure
Supports aria-label prop (default: "Calendar") for labeling
Arrow keys navigate between days
Page Up/Down navigate between months
Disabled dates are announced and cannot be selected
Selected date uses aria-selected
Month/year navigation buttons have accessible labels

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Mo	Tu	We	Th	Fr	Sa	Su