Installation

Calix needs the React package and one calendar adapter. Install the theme package only if you want its ready-made CSS; components otherwise render unstyled and remain fully usable.

pnpm add @alydev/datepicker @alydev/adapter-gregorian
pnpm add @alydev/themes # optional

To use the Persian calendar, add its adapter instead of or alongside the Gregorian one:

pnpm add @alydev/adapter-jalali

Requirements

• React and React DOM 18.3+ or 19.
• A client component for interactive pickers. In Next.js App Router, add "use client" to the component that renders Calix.

The adapters bring their own runtime date library: date-fns for Gregorian and date-fns-jalali for Jalali. You do not need to install those separately.

Optional holiday data

Install a holiday dataset only when you need named holiday markers or holiday-aware availability:

pnpm add @alydev/holidays-iran
# or
pnpm add @alydev/holidays-international

See Holidays for usage.

Choose styles now

Do one of the following before copying the first picker:

• Ready-made theme: import @alydev/themes/default.css once.
• Structural base: import @alydev/themes/minimal.css once.
• Your own CSS: import neither file and style Calix via its class and state contract.

The import location changes by framework. See framework setup for exact Vite, Next.js, and Remix files. The theme has no JavaScript runtime.

Next: framework setup, then your first picker.