As you can see in the examples below, you can use any of these properties, either in DatePicker or Calendar:

<Calendar /> 

<DatePicker /> 

<Calendar
  calendar="persian"
  locale="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.

<div style={{ direction: "rtl" }}>
  <DatePicker
    calendar="persian"
    locale="fa"
    calendarPosition="bottom-right"
  />
</div>

<Calendar
  calendar="arabic"
  locale="ar"
/> 

<Calendar
  calendar="indian"
  locale="hi"
/> 

<DatePicker
  calendar="persian"
  locale="en"
/>