This package uses the Gregorian calendar and English locale by default, so if you want to use the default calendar and locale, you do not need to import anything else, but to use other calendars and locales, you must import them separately.

Calendars and locales are stored inside the react-date-object package, which is installed with this package.

The following two tables list all the calendars and locales that can be used, along with their pathes, and below them, are examples of how to import each of them.

import favorite_calendar from "react-date-object/calendars/favorite_calendar"

The convention for importing locales is the same as the calendars, except that you should use the locales folder instead of the calendars folder.

because each calendar has its own locale files, this is how to name the files in the locales folder: 'calendar_locale'.

For example, if you want to use the Gregorian calendar in Farsi locale, you need to use the gregorian_fa file, and if you want to use the Persian calendar and the Farsi locale, you must import the persian_fa file.

Below are some examples of importing different calendars and locales.

<Calendar /> 

<DatePicker /> 

import React from "react"
import { Calendar } from "react-multi-date-picker"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

export default function Example() {
  return (
    <Calendar
      calendar={persian}
      locale={persian_fa}
    />
  )
}

The default calendarPosition is bottom-left, so on pages with a right to left direction, you can set the calendarPosition to bottom-right, for getting better results.

import React from "react"
import DatePicker from "react-multi-date-picker"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

export default function Example() {
  return (
    <div style={{ direction: "rtl" }}>
      <DatePicker
        calendar={persian}
        locale={persian_fa}
        calendarPosition="bottom-right"
      />
    </div>
  )
}

import React from "react"
import { Calendar } from "react-multi-date-picker"
import arabic from "react-date-object/calendars/arabic"
import arabic_ar from "react-date-object/locales/arabic_ar"

export default function Example() {
  return (
    <Calendar
      calendar={arabic}
      locale={arabic_ar}
    />
  )
}

import React from "react"
import { Calendar } from "react-multi-date-picker"
import indian from "react-date-object/calendars/indian"
import indian_hi from "react-date-object/locales/indian_hi"

export default function Example() {
  return (
    <Calendar
      calendar={indian}
      locale={indian_hi}
    />
  )
}

import React from "react"
import DatePicker from "react-multi-date-picker"
import persian from "react-date-object/calendars/persian"
import persian_en from "react-date-object/locales/persian_fa"

export default function Example() {
  return (
    <DatePicker
      calendar={persian}
      locale={persian_en}
      calendarPosition="bottom-right"
    />
  )
}

By using the method I explain below, you can create most of the 12-month calendars for your date picker.

Unfortunately, the 13-month calendars (such as the Chinese or Hebrew calendars, which have 13 months in the leap year) are not currently supported.

In the following, I will explain how to create a Thai calendar for the date picker.

The reason for choosing the Thai calendar is that it is very similar to the Gregorian calendar. In fact, the Thai calendar is 543 years ahead of the Gregorian calendar.

To create a calendar, first, go to the calendars folder in the date-object repository, download the gregorian.js file, and save it to your local directory.

Try to match the file name with the name of your favorite calendar, as well as with the name property in the calendar object. Also, note that all properties in the calendar object are required, and deleting any of them will cause the calendar to malfunction. so if you don't want to modify a property, instead of deleting it, leave it as it is.

For example, I downloaded the gregorian.js file and saved it as thai.js:

const thai = {
  name: "thai",
  startYear: 1,
  yearLength: 365,
  epoch: 1721424,
  century: 20,
  weekStartDayIndex: 1,
  getMonthLengths(isLeap) {
    return [31, isLeap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  },
  isLeap(year) {
    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
  },
  getLeaps(currentYear) {
    if (currentYear === 0) return;

    let year = currentYear > 0 ? 1 : -1;

    let leaps = [],
      condition = () =>
        currentYear > 0 ? year <= currentYear : currentYear <= year,
      increase = () => (currentYear > 0 ? year++ : year--);

    while (condition()) {
      if (this.isLeap(year)) leaps.push(year);

      increase();
    }

    return leaps;
  },
  getDayOfYear({ year, month, day }) {
    let monthLengths = this.getMonthLengths(this.isLeap(year));

    for (let i = 0; i < month.index; i++) {
      day += monthLengths[i];
    }

    return day;
  },
  getAllDays(date) {
    const { year } = date;

    return (
      this.yearLength * (year - 1) +
      this.leapsLength(year) +
      this.getDayOfYear(date)
    );
  },
  leapsLength(year) {
    return (
      (((year - 1) / 4) | 0) +
      (-((year - 1) / 100) | 0) +
      (((year - 1) / 400) | 0)
    );
  },
  guessYear(days, currentYear) {
    let year = ~~(days / 365.24);

    return year + (currentYear > 0 ? 1 : -1);
  },
};

export default thai;

const julianDay = new DateObject().toJulianDay();

console.log(julianDay); // 2459407 (Monday, July 12 2021)

const days = new DateObject().add(543, "years").toDays();

console.log(days); // 936310 (Monday, July 12 2564)

// delta_t = t - t0
const epoch = julianDay - days

console.log(epoch) // 1523097

const thai = {
  name: "thai",
  startYear: 1,
  yearLength: 365,
  epoch: 1523097,
  century: 25,
  weekStartDayIndex: 1,
  getMonthLengths(isLeap) {
    return [31, isLeap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  },
  isLeap(year) {
    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
  },
  getLeaps(currentYear) {
    if (currentYear === 0) return;

    let year = currentYear > 0 ? 1 : -1;

    let leaps = [],
      condition = () =>
        currentYear > 0 ? year <= currentYear : currentYear <= year,
      increase = () => (currentYear > 0 ? year++ : year--);

    while (condition()) {
      if (this.isLeap(year)) leaps.push(year);

      increase();
    }

    return leaps;
  },
  getDayOfYear({ year, month, day }) {
    let monthLengths = this.getMonthLengths(this.isLeap(year));

    for (let i = 0; i < month.index; i++) {
      day += monthLengths[i];
    }

    return day;
  },
  getAllDays(date) {
    const { year } = date;

    return (
      this.yearLength * (year - 1) +
      this.leapsLength(year) +
      this.getDayOfYear(date)
    );
  },
  leapsLength(year) {
    return (
      (((year - 1) / 4) | 0) +
      (-((year - 1) / 100) | 0) +
      (((year - 1) / 400) | 0)
    );
  },
  guessYear(days, currentYear) {
    let year = ~~(days / 365.24);

    return year + (currentYear > 0 ? 1 : -1);
  },
};

export default thai;

import { Calendar } from "react-multi-date-picker"
import thai from "./thai"

export default function Example() {
  return <Calendar calendar={thai} />
}

const thai_th = {
  name: "thai_th",
  months: [
    ["มกราคม", "ม.ค."],
    ["กุมภาพันธ์", "ก.พ."],
    ["มีนาคม", "มี.ค."],
    ["เมษายน", "เม.ย.	"],
    ["พฤษภาคม", "พ.ค."],
    ["มิถุนายน", "มิ.ย."],
    ["กรกฎาคม", "ก.ค."],
    ["สิงหาคม", "ส.ค."],
    ["กันยายน", "ก.ย."],
    ["ตุลาคม", "ต.ค."],
    ["พฤศจิกายน", "พ.ย."],
    ["ธันวาคม", "ธ.ค."],
  ],
  weekDays: [
    ["วันเสาร์", "ส"],
    ["วันอาทิตย์", "อา"],
    ["วันจันทร์", "จ"],
    ["วันอังคาร", "อ"],
    ["วันพุธ", "พ"],
    ["วันพฤหัส", "พฤ"],
    ["วันศุกร์", "ศ"],
  ],
  digits: ["๐", "๑", "๒", "๓", "๔", "๕", "๖", "๗", "๘", "๙"],
  meridiems: [
    ["ก่อนเที่ยง", "เอเอ็ม"],
    ["หลังเที่ยง", "พีเอ็ม"],
  ],
};

export default thai_th

import { Calendar } from "react-multi-date-picker"
import thai from "./thai"
import thai_th from "./thai_th"

export default function Example() {
  return (
    <Calendar 
      calendar={thai} 
      locale={thai_th} 
    />
  )
}