Start here
Choose the right Calix entry point, then install and render it.
Calix is an accessible React date picker with separate calendar adapters. Pick the UI you need, add one adapter, then choose either the included CSS theme or your own styles.
Choose your starting point
| You need | Start here |
|---|---|
| A date input with a popup calendar | Install Calix, then render a DatePicker |
| A calendar that is always visible | Install Calix, then render a Calendar |
| A custom design-system UI | Set up styles, then use hooks or compound parts |
New to Calix? Follow this order without skipping ahead:
- Install the React package and one adapter.
- Put the optional CSS import in the right framework file.
- Copy the first picker.
- Choose a guide for another calendar, selection and output, constraints, or custom styling.
What you get
- Selection: single, multiple, range, week, month, quarter, and year modes.
- Calendars: Gregorian, Jalali/Persian, Hijri (Umm al-Qura), and Thai Buddhist adapters; custom adapters are supported.
- Rendering choices:
DatePickerfor a popover,Calendarfor inline use, or hooks and compound components for complete DOM control. - Constraints: min/max dates, allow/deny lists, weekdays, months, years, holidays, business days, and a custom disabled-date predicate.
- Localization: BCP-47 locales, RTL, localized digits, labels, and configurable week starts.
- Styling: no required CSS framework; semantic classes,
data-*state, and optional themes. - Accessibility: keyboard navigation, roving focus, ARIA grid semantics, and focus restoration.
SunMonTueWedThuFriSat
Packages
| Package | Purpose |
|---|---|
@alydev/datepicker | React components, hooks, and public value helpers. |
@alydev/core | Calendar contracts, selection strategies, validation, parsing, and formatting. |
@alydev/adapter-gregorian | Gregorian adapter, backed by date-fns. |
@alydev/adapter-jalali | Jalali/Persian adapter, backed by date-fns-jalali. |
@alydev/adapter-hijri | Hijri (Umm al-Qura) adapter backed by the platform ICU calendar. |
@alydev/adapter-buddhist | Thai Buddhist adapter using Buddhist Era years. |
@alydev/holidays-iran | Maintained Iranian public-holiday data for Jalali years 1400–1420. |
@alydev/holidays-international | New Year's Day and Christmas Day data for 2000–2100. |
@alydev/themes | Optional default and minimal CSS themes. |
@alydev/icons | Tree-shakeable SVG icons. |
The React package needs one adapter. Themes are optional; they never load by default. Continue with Installation.