Migration

Calix uses value and onChange consistently across its components. It exposes native Date values and range objects, and keeps calendar-specific behavior in the adapter prop.

From react-day-picker

Add adapter={gregorian} to the Calix component. Unlike react-day-picker, Calix includes a popup DatePicker and a Jalali adapter.

From MUI X, Ant Design, or Mantine

These libraries couple calendar UI to their component systems. With Calix, choose one of three migration paths:

1. import @alydev/themes/default.css for a ready appearance;
2. attach your existing utility/CSS classes with classNames;
3. render entirely custom markup with useCalendar.

The form value mapping is usually direct:

const [value, setValue] = useState<Date | null>(null);
<DatePicker adapter={gregorian} value={value} onChange={setValue} />;

For ranges, initialize with { start: null, end: null }. Use onOutputChange and outputPattern only when an external API needs a serialized value.

Add Jalali without a separate picker

Replace the adapter and locale; selection and styling APIs stay the same.

import { jalali } from "@alydev/adapter-jalali";
 
<DatePicker adapter={jalali} locale="fa-IR" dir="rtl" />;

Review Localization if your previous picker used custom Persian labels, week starts, or digit formatting.