NOCTA UI

Calendar

A fully featured date picker with keyboard navigation, accessibility support, and customizable styling.

Installation

Install the Calendar component using the nocta-ui CLI:

npx @nocta-ui/cli add calendar

Then import the component:

import { Calendar } from '@/components/ui/calendar';

Examples

Default Calendar

Week Configuration

Week Numbers

Disabled Dates

Date Range Restrictions

Custom Formatting

Disabled State

Event Handling

API Reference

Prop

Type

Button

A versatile button component with multiple variants, sizes and dark mode support

Checkbox

A versatile checkbox component for forms and selections with multiple variants, sizes and dark mode support

On this page

Default Calendar

Week Configuration

Date Range Restrictions

Custom Formatting