مقداری که به پراپ headerOrder پاس میدهید باید یک آرایه شامل موارد زیر باشد:

RIGHT_BUTTON

MONTH_YEAR

YEAR_MONTH

LEFT_BUTTON

مقدار پیشفرض headerOrder برابر است با

['LEFT_BUTTON', 'MONTH_YEAR', 'RIGHT_BUTTON']

<Calendar 
  headerOrder={["MONTH_YEAR", "LEFT_BUTTON", "RIGHT_BUTTON"]} 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

پراپ monthYearSeparator برای تعیین کاراکتری که بین عناصر ماه و سال در سربرگ تقویم ظاهر می شود استفاده می شود. به طور پیش فرض، مقدار monthYearSeparator '، ' است.

برای افزودن یک کاراکتر جداکننده، یک مقدار رشته را به monthYearSeparator ارسال کنید. به عنوان مثال، برای استفاده از یک نوار عمودی (|) به عنوان جداکننده، می توانید از کد زیر استفاده کنید:

<Calendar 
  monthYearSeparator="|"
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<Calendar 
  formatMonth={(month, year) => {
    return "ماه " + month;
  }}
  formatYear={(year, month) => {
    return "سال " + year;
  }}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

برای غیرفعال کردن دکمه های پیمایش، می توانید مقدار پراپرتی buttons را روی false تنظیم کنید.

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<Calendar 
  buttons={false} 
  calendar={persian}
  locale={persian_fa}
/> 

میتوانید به جای دکمه های پیشفرض، المنت مورد نظر خود را رندر کنید.

برای این منظور میتوانید به یکی از روش های زیر عمل کنید.

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<Calendar
  renderButton={(direction, handleClick) => (
    <button onClick={handleClick}>
      {direction === "right" ? ">" : "<"}
    </button>
  )}
  calendar={persian}
  locale={persian_fa}
/> 

اگر برای محدود کردن تقویم یا دیتپیکر، تاریخ حداکثر یا حداقل تعیین کرده باشید، می توانید مقدار disabled را از پراپ ها دریافت کنید.

فایل سی اس اس:

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

کد:

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";

function CustomButton({ direction, handleClick, disabled }) {
  return (
    <i
      onClick={handleClick}
      style={{
        padding: "0 10px",
        fontWeight: "bold",
        color: disabled ? "gray" : "blue"
      }}
      className={disabled ? "cursor-default" : "cursor-pointer"}
    >
      {direction === "right" ? ">" : "<"}
    </i>
  )
}

export default function Example(){
  return (
    <Calendar
      minDate={new Date()} 
      renderButton={<CustomButton />} 
      calendar={persian}
      locale={persian_fa}
    />
  )
}