I’m currently working on a project and I need to implement a Persian (Shamsi) calendar using the DatePicker component from NextUI. My goal is to display the calendar with Persian months and handle dates according to the Persian calendar system. I’m trying to achieve this without using any additional libraries outside of NextUI and react-aria.

Here’s what I’ve done so far:

import styles from "./CustomDatePicker.module.css";
import {DatePicker, DateValue} from "@nextui-org/react";
import {useEffect, useState} from "react";
import {getLocalTimeZone, parseAbsoluteToLocal, today} from "@internationalized/date";
import {I18nProvider} from "@react-aria/i18n";
import moment from "moment-jalaali";
import {getDifferenceFromNowInDays} from "@/core/utils/time_utils.ts";

function CustomDatePicker({onValueChange}: { onValueChange: (date: DateValue) => void }) {
moment.loadPersian();
const currentDate = moment();
const [date, setDate] = useState<DateValue>(parseAbsoluteToLocal(currentDate.toISOString()));

useEffect(() => {
    onValueChange(date);
}, [date]);

return (
    <div style={{direction: "ltr"}} className={"w-full"}>
        <I18nProvider locale="hi-IN-u-ca-indian">
            <DatePicker
                label={'تاریخ پیشنهادی کلاس'}
                value={date}
                granularity="day"
                minValue={today(getLocalTimeZone())}
                onChange={setDate}
                isDateUnavailable={(date) => {
                    const day = date.day;
                    const month = date.month;
                    const year = date.year;
                    const dateType = new Date(year, month - 1, day);
                    return (getDifferenceFromNowInDays(dateType) ?? 0) % 2 === 0;
                }}
                classNames={{
                    calendar: styles.calendar,
                    label: "text-end"
                }}
            />
        </I18nProvider>
    </div>
);
}

export default CustomDatePicker;

the output is like this:

How can I customize the DatePicker component from NextUI to display a Persian (Shamsi) calendar with Persian month names without using additional libraries? Is there a way to achieve this through I18nProvider or other configurations?

Any guidance or examples would be greatly appreciated. Thanks in advance!