The header of the Calendar component can be arranged in a specific order using the headerOrder prop. The headerOrder prop should be an array containing one or more of the following values:

RIGHT_BUTTON: A button that appears on the right side of the header. This button is typically used for navigating to the next month or year.

MONTH_YEAR: A display of the current month and year in the center of the header. This element is typically used to provide context for the calendar.

YEAR_MONTH: A display of the current year and month in the center of the header. This element is similar to MONTH_YEAR, but with the year displayed before the month.

LEFT_BUTTON: A button that appears on the left side of the header. This button is typically used for navigating to the previous month or year.

The default value of headerOrder is ['LEFT_BUTTON', 'MONTH_YEAR', 'RIGHT_BUTTON'], which arranges the header elements in a typical order for a calendar.

To customize the order of the header elements, pass an array of the desired element names to the headerOrder prop. For example, to display the MONTH_YEAR element first, followed by the LEFT_BUTTON and RIGHT_BUTTON buttons, you could use the following code:

<Calendar 
  headerOrder={["MONTH_YEAR", "LEFT_BUTTON", "RIGHT_BUTTON"]} 
/>

The monthYearSeparator prop is used to specify the character that appears between the month and year elements in the Calendar header. By default, the monthYearSeparator value is ', '

To add a separator character, pass a string value to the monthYearSeparator prop. For example, to use a vertical bar (|) as the separator, you can use the following code:

<Calendar 
  monthYearSeparator="|"
/>

<Calendar 
  formatMonth={(month, year) => {
    return "Month " + month;
  }}
  formatYear={(year, month) => {
    return "Year " + year;
  }}
/>

You can set the buttons prop to false, to disable the navigation buttons.

<Calendar 
  buttons={false} 
/> 

You can render your favorite element instead of the default buttons.

For this purpose, you can do one of the following methods:

<Calendar
  renderButton={(direction, handleClick) => (
    <button onClick={handleClick}>
      {direction === "right" ? ">" : "<"}
    </button>
  )}
/> 

You can also get disabled value from the props ,if you have set a min or max date to limit the calendar or date picker.

style.css:

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

code:

import { Calendar } from "react-multi-date-picker";

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 />} 
    />
  )
}