چند ویژگی دیگر وجود داره که من آنها را به صورت پیش فرض در فایل اصلی دیتپیکر قرار نمیدم.

دلیلش هم اینه که ممکنه همه تمایل به استفاده از آنها رو نداشته باشند. بنابراین هیچ دلیلی وجود نداره که با قرار دادنشون در فایل اصلی، حجم کار رو افزایش بدم.

نکته خوب دیگه در مورد پلاگین ها اینه که شما ممکنه بخواهید یک امکان به دیت پیکر خود اضافه کنید که در این پکیج وجود نداره ، بنابراین می تونید با استفاده از این ویژگی، پلاگینی که خودتون نوشتید رو به datepicker اضافه کنید.

کد مثال بالا :

import React, { useState } from "react"
import { Calendar, DateObject } from "react-multi-date-picker"
import DatePickerHeader from "react-multi-date-picker/plugins/date_picker_header"
import DatePanel from "react-multi-date-picker/plugins/date_panel"
import multiColors from "react-multi-date-picker/plugins/colors"
import Settings from "react-multi-date-picker/plugins/settings"
import Toolbar from "react-multi-date-picker/plugins/toolbar"
import persian from "react-date-object/calendars/persian:
import persian_fa from "react-date-object/locales/persian_fa"

const dateObject = new DateObject({ calendar: persian, locale: persian_fa })

const toDateObject = day => new DateObject(dateObject).setDay(day)

const colors = {
  green: [2, 10, 17].map(toDateObject),
  blue: [5, 6, 14].map(toDateObject),
  red: [13, 19, 25].map(toDateObject),
  yellow: [15, 22, 28].map(toDateObject)
}

Object.keys(colors).forEach(color => {
  colors[color].forEach((date, index) => {
      colors[color][index].color = color
  })
})

const initialProps {
  value: [
    ...colors.green,
    ...colors.blue,
    ...colors.red,
    ...colors.yellow
  ], 
  multiple: true,
  calendar: persian,
  locale: persian_fa
})

export default function DatePickerPlugins() {
  const [props, setProps] = useState(initialProps)
  const isRTL = ["fa", "ar"].includes(props.locale?.name?.split?.("_")?.[1])

  return (
    <div 
      style={{ 
        display: "flex", 
        justifyContent: "center" 
      }}
    >
      <Calendar
        {...props}
        plugins={[
          <DatePickerHeader 
            position="top" 
            size="medium" 
          />,
          <DatePanel
            position={isRTL ? "left" : "right"}
            sort="date"
            eachDaysInRange={!props.onlyMonthPicker && !props.onlyYearPicker}
          />
          multiColors({ position: isRTL ? "right" : "left" }),
          <Settings 
            position="bottom" 
            defaultActive="locale" 
          />,
          <Toolbar 
            position="bottom" 
          />
        ]}
      />
    </div>
  )
}