باید بگم تنظیم کردن موقعیت تقویم در دیت پیکر خیلی منو اذیت کرد جوری که مجبور شدم براش یک پکیج جدا بنویسم! ولی هنوزم نمیتونم بگم 100% جواب میده، اگر مشکلی با پوزیشن تقویم داشتید میتونید در این قسمت مطرح کنید.

تو نسخه های اولیه برای کانتینر دیتپیکر از پوزیشن ریلیتیو استفاده میکردم که خوب راحته و محاسباتی لازم نداره ولی به مرور مشخص شد که پوزیشن ریلیتیو اصلا جوابگو نیست، یعنی ممکنه برای یکسری کارا جوابگو باشه ولی برای لیات های پیچیده تر صد در صد به مشکل میخوره.

اینجوری شد که تو ورژن های بعدی پوزیشن کانتینر رو به همون استاتیک تغییر دادم سعی کردم موقعیت تقویم رو با محاسبات جاوااسکریپت مشخص کنم ولی کاشف به عمل اومد که قضیه اونجوریم که ادم فکر میکنه ساده نیست و با چهارتا جمع و تفریق نمیشه موقعیت رو تنظیم کرد! محاسبات همینجوری پیچیده و پیچیده تر شد تا آخر تصمیم گرفتم کلشو به پکیج المنت پاپر منتقل کنم تا بشه ازش تو پروژه های دیگه هم استفاده کرد.

روش مشخص کردن موقعیت تقویم اینجوری که شما باید دوتا موقعیت اصلی و نسبی رو به صورت 'موقعیت اصلی-موقعیت نسبی' برای دیت پیکرتون تعریف کنید، موقعیت اصلی برای اینه که مشخص کنه تقویم باید کجای اینپوت باشه، که براش میتونید چهار تا مقدار بالا، پایین، چپ و راست رو در نظر بگیرید. موقعیت نسبی هم برای اینه که مشخص کنه تقویم کجای موقعیت اصلی قرار بگیره. که خودش از سه قسمت ابتدا، وسط و انتها تشکیل شده.

در زیر تمام موقعیت هایی که میشه برای دیت پیکر تعریف کنید رو آوردم :

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const containerRef = useRef()
const datePickerRef = useRef()

const [state, setState] = useState({
  mainPosition: "bottom",
  relativePosition: "center",
  fixMainPosition: false,
  fixRelativePosition: false,
  offsetY: 0,
  offsetX: 0
})

const updateState = (key, value) => setState({ 
  ...state, 
  [key]: value
})

useEffect(() => {
  containerRef.current.scrollTo(
    (containerRef.current.clientWidth * -1),
    (containerRef.current.clientHeight / 2)
  )

  datePickerRef.current.openCalendar()
}, [])

const {
  mainPosition,
  relativePosition,
  fixMainPosition,
  fixRelativePosition,
  offsetY,
  offsetX
} = state
.
.
.
<div>
  <div 
    style={{ 
      display: "flex", 
      justifyContent: "space-around",
      flexWrap: "wrap",
      margin: "10px 0" 
    }}
  >
    <label>
      موقعیت اصلی:
      <select
        value={mainPosition}
        onChange={e => updateState("mainPosition", e.target.value)}
        className="select"
      >
        <option value="top">بالا</option>
        <option value="bottom">پایین</option>
        <option value="left">چپ</option>
        <option value="right">راست</option>
      </select>
    </label>
    <label>
      <input
        type="checkbox"
        value={fixMainPosition}
        onChange={e => updateState("fixMainPosition", e.target.checked)}
      />
      فیکس شدن موقعیت اصلی
    </label>
    <label>
      موقعیت نسبی:
      <select
        value={relativePosition}
        onChange={e => updateState("relativePosition", e.target.value)}
        className="select"
      >
        <option value="start">شروع</option>
        <option value="center">وسط</option>
        <option value="end">پایان</option>
      </select>
    </label>
    <label>
      <input
        type="checkbox"
        value={fixRelativePosition}
        onChange={e => updateState("fixRelativePosition", e.target.checked)}
      />
      فیکس شدن موقعیت نسبی
    </label>
    <label>
      فاصله عمودی:
      <input
        type="number"
        className="input"
        style={{ width: "30px" }}
        value={offsetY}
        onChange={e => updateState("offsetY", Number(e.target.value))}
      />
    </label>
    <label>
      فاصله افقی:
      <input
        type="number"
        className="input"
        style={{ width: "30px" }}
        value={offsetX}
        onChange={e => updateState("offsetX", Number(e.target.value))}
      />
    </label>
  </div>
  <div
    ref={containerRef}
    style={{ 
      backgroundColor: "whitesmoke", 
      height: "500px", 
      overflow: "auto", 
      position: "relative",
      borderRadius: "5px",
      boxShadow: "inset 0 0 6px 0 #888" 
    }}
  >
    <div
      style={{ 
        width: "300%", 
        height: "200%", 
        display: "flex", 
        flexDirection: "column", 
        justifyContent: "center" 
      }}
    >
      <DatePicker
        ref={datePickerRef}
        containerStyle={{ //datepicker container style
          width: "180px",
          margin: "auto"
        }}
        style={{ //input style
          width: "100%",
          height: "26px",
          boxSizing: "border-box"
        }}
        calendarPosition={`${mainPosition}-${relativePosition}`}
        fixMainPosition={fixMainPosition}
        fixRelativePosition={fixRelativePosition}
        offsetY={offsetY}
        offsetX={offsetX}
        onClose={() => false}
        calendar={persian}
        locale={persian_fa}
      />
    </div>
  </div>
</div>

دو مثال دیگر که مربوط به موقعیت تقویم میشوند هم وجود دارند که ممکن است بخواهید آنها را مشاهده کنید :