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 Group

Arrange multiple buttons together with shared styling, spacing, and alignment controls.

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