نکته مهم در مورد پراپرتی onClickDate که باید گفته بشه اینه که اگر روی تاریخی کلیک شود، مقدار آن تاریخ به عنوان آرگومان در onClickDate ارسال میشود، ولی اگر روی دکمه حذف کلیک شود، باز هم onClickDate صدا زده میشود اما با مقدار آرگومان undefined .

import DatePicker, { DateObject } from "react-multi-date-picker"
import DatePanel from "react-multi-date-picker/plugins/date_panel" 
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const [value, setValue] = useState([
  new DateObject({ calendar: persian }),
  new DateObject({ calendar: persian }).add(2, "days"),
  new DateObject({ calendar: persian }).add(10, "days")
])
.
.
.
<DatePicker
  value={value}
  onChange={setValue}
  multiple
  plugins={[
    <DatePanel sort="date" position="left" />
  ]}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import DatePicker, { DateObject } from "react-multi-date-picker"
import DatePanel from "react-multi-date-picker/plugins/date_panel" 
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const [value, setValue] = useState(
  [
    5, 
    10,
    15,
    20,
    25,
    30
  ].map(day => new DateObject({ calendar: persian }).setDay(day))
)
.
.
.
<DatePicker
  value={value}
  onChange={setValue}
  multiple
  plugins={[
    <DatePanel position="right" />
  ]}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import DatePicker, { DateObject } from "react-multi-date-picker"
import DatePanel from "react-multi-date-picker/plugins/date_panel" 
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const [value, setValue] = useState([
  new DateObject({ calendar: persian }), 
  new DateObject({ calendar: persian }).add(1, "day")
])
.
.
.
<DatePicker
  value={value}
  onChange={setValue}
  plugins={[
    <DatePanel
      removeButton={false}
      position="left" 
    />
  ]}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import DatePicker, { DateObject } from "react-multi-date-picker"
import DatePanel from "react-multi-date-picker/plugins/date_panel" 
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const [value, setValue] = useState([
  new DateObject({ calendar: persian }), 
  new DateObject({ calendar: persian }).add(1, "day")
])
.
.
.
<DatePicker
  value={value}
  onChange={setValue}
  plugins={[
    <DatePanel
      removeButton={false}
      onClickDate={dateObject => {
        let mustDelete = window.confirm("آیا مطمعن به حذف این تاریخ هستید ؟")
      
        if (mustDelete) setValue(
          value.filter(date => date !== dateObject)
        )
      }}
      position="left" 
    />
  ]}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import DatePicker from "react-multi-date-picker"
import DatePanel from "react-multi-date-picker/plugins/date_panel" 
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  plugins={[
    <DatePanel header="همه تاریخ ها" />
  ]}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

با کلیک روی هر تاریخ در پنل تاریخ ها، آن تاریخ فوکوس میشود.

برای بهتر مشخص شدن اینکه کدام تاریخ فوکوس شده است ، میتوانید از پراپرتی markFocused استفاده کنید. همچنین برای شخصی سازی بیشتر آن تاریخ میتوانید برای آن، کلاس ست کنید.

import DatePicker from "react-multi-date-picker"
import DatePanel from "react-multi-date-picker/plugins/date_panel"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const [focusedDate, setFocusedDate] = useState();
.
.
.
<DatePicker
  multiple
  sort
  onFocusedDateChange={setFocusedDate}
  onClose={() => setFocusedDate(undefined)}
  plugins={[
    <DatePanel markFocused focusedClassName="bg-red" />
  ]}
  mapDays={({ date, isSameDate }) => {
    let props = {}
    
    if (!isSameDate(date, focusedDate)) return

    props.style = { backgroundColor: "red" }
    
    return props
  }}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>