Ecme logoEcme logo
داشبورد
    فروشگاه آنلاین
    پروژه
    بازاریابی
    تحلیل
مفاهیم
    هوش مصنوعی
      گفتگو
      تصویر
    پروژه‌ها
      تابلوی اسکرام
      فهرست
      جزئیات
      وظایف
      مسائل
    مشتریان
      فهرست
      ویرایش
      ایجاد
      جزئیات
    محصولات
      فهرست
      ویرایش
      ایجاد
    سفارش‌ها
      فهرست
      ویرایش
      ایجاد
      جزئیات
    حساب کاربری
      تنظیمات
      سابقه فعالیت
      نقش‌ها و دسترسی‌ها
      تعرفه‌ها
    مرکز راهنمایی
      مرکز پشتیبانی
      مقاله
      ویرایش مقاله
      مدیریت مقاله
    تقویم
    مدیریت فایل
    ایمیل
    گفتگو
اجزای رابط کاربری
    عمومی
      دکمه
      شبکه
      تایپوگرافی
      نمادها
    بازخورد
      هشدار
      پنجره گفتگو
      منوی کشویی
      نوار پیشرفت
      پیش‌نمایش
      نشانگر بارگذاری
      پیام موقت
    نمایش اطلاعات
      تصویر کاربر
      نشانک
      تقویم
      کارت‌ها
      جدول
      برچسب
      خط زمان
      راهنمای ابزار
    فرم‌ها
      کادر انتخاب
      انتخابگر تاریخ
      کنترل‌های فرم
      ورودی
      گروه ورودی
      دکمه رادیویی
      بخش
      انتخابگر
      کلید دوحالته
      ورودی زمان
      بارگذاری
    ناوبری
      منوی کشویی
      منو
      صفحه‌بندی
      گام‌ها
      زبانه‌ها
    نمودار
      نمودارها
      نقشه‌ها
احراز هویت
    ورود به سیستم
      ساده
      کناری
      دوبخشی
    ثبت‌نام
      ساده
      کناری
      دوبخشی
    بازیابی رمز عبور
      ساده
      کناری
      دوبخشی
    بازنشانی رمز عبور
      ساده
      کناری
      دوبخشی
    تایید رمز یکبار مصرف
      ساده
      کناری
      دوبخشی
سایر
    دسترسی غیرمجاز
    صفحه فرود
راهنما
    مستندات
    اجزای اشتراکی
    ابزارها
    تاریخچه تغییرات
حق نشر © 2026 Ecme تمامی حقوق محفوظ است.
شرایط و ضوابط | حریم خصوصی و سیاست

تقویم (Calendar)

کامپوننت تقویم برای دسته‌بندی محتوا با یک کلمه کلیدی استفاده می‌شود.

پایه (Basic)

استفاده پایه از تقویم.
شیدسچپج

محدوده (Range)

تقویم محدوده رفتار مشابهی با تقویم دارد، اما قادر به انتخاب تاریخ شروع و پایان است.
شیدسچپج

رندر سفارشی (Custom render)

شما می‌توانید المان‌های روز سفارشی رندر کنید یا استایل‌ها و کلاس‌ها را با این ویژگی‌ها dayStyle، dayClassName و renderDay به روزها اعمال کنید.
شیدسچپج

تاریخ‌های غیرفعال مشخص (Disabled certain date)

قسمت‌هایی از تاریخ‌ها را با استفاده از ویژگی disabledDate غیرفعال کنید.
شیدسچپج

تاریخ‌های غیرفعال خارج از دوره (Disable out of period date)

با تنظیم ویژگی‌های minDate و maxDate، تاریخ‌های قابل دسترس را در یک دوره محدود کنید.
شیدسچپج

نمای چندتایی تاریخ (Multiple date view)

تقویم یا تقویم محدوده می‌تواند نمای چندتایی تاریخ داشته باشد با تنظیم ویژگی dateViewCount بیشتر از 1.
شیدسچپج
شیدسچپج

انتخاب چندگانه (Multiple selection)

کامپوننت تقویم اجازه می‌دهد تاریخ‌های متعدد را با تنظیم ویژگی multipleSelection انتخاب کنید.
شیدسچپج

API

تقویم (Calendar)
ویژگیتوضیحاتنوعپیش‌فرض
dateViewCountتعداد نمایش تاریخ‌ها در انتخاب‌کننده تاریخnumber1
dayClassNameاعمال className به روزها بر اساس آرگومان‌ها(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string-
dayStyleاعمال استایل به روزها بر اساس آرگومان‌ها(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties-
defaultMonthماه پیش‌فرض برای DatePickerRange بدون کنترلDate-
defaultViewنمایش پیش‌فرض DatePickerRange'date' | 'month' | 'year''date'
disabledDateمشخص کردن تاریخی که قابل انتخاب نیست(date: Date) => boolean-
disableOutOfMonthآیا روزهایی که خارج از ماه داده‌شده هستند غیرفعال شوندbooleanfalse
enableHeaderLabelآیا غیرفعال کردن برچسب هدر برای تغییر نمای تاریخ مجاز استbooleantrue
firstDayOfWeekروز اول هفته'sunday' | 'monday''monday'
hideOutOfMonthDatesآیا روزهایی که خارج از ماه داده‌شده هستند پنهان شوندbooleanfalse
hideWeekdaysآیا روزهای هفته پنهان شوندbooleanfalse
isDateFirstInRangeهایلایت کردن تاریخ به عنوان اولین تاریخ در یک بازه(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean-
isDateInRangeهایلایت کردن تاریخ در یک بازه(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean-
isDateLastInRangeهایلایت کردن تاریخ به عنوان آخرین تاریخ در یک بازه(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean-
labelFormatفاصله‌گذاری بین نمایش تاریخ‌ها در ورودیstring'~'
localeمحلی‌سازی DatePickerRangedayjs localeen
maxDateحداکثر تاریخ قابل انتخابDate-
minDateحداقل تاریخ قابل انتخابDate-
monthLabelFormatفرمت برچسب ماهstring'YYYY'
onChangeتابع برگشتی هنگام انتخاب تاریخfunction(date: Date)-
onDayMouseEnterتابع برگشتی هنگام حرکت ماوس روی تاریخfunction(date: Date)-
paginateByصفحه‌بندی بر اساس تعداد نمایش‌هاnumberdateViewCount | 1
preventFocusممانعت از فوکوس هنگام کلیکbooleanfalse
rangeهایلایت کردن بازه تاریخ داده‌شده[Date | null, Date | null]-
renderDayرندر کردن عنصر سفارشی برای روزها بر اساس پارامترهای داده‌شده(date: Date) => ReactNodefalse
valueمقدار تقویم (کنترل‌شده)Date-
weekdayLabelFormatفرمت نمایش روزهای هفتهstring'dd'
weekendDaysمشخص کردن روزهای تعطیلات آخر هفتهnumber[][0, 6]
yearLabelFormatفرمت برچسب سالstring'YYYY'
تقویم محدوده (RangeCalendar)
ویژگیتوضیحاتنوعپیش‌فرض
dateViewCountتعداد نمایش تاریخ‌ها در پیکرnumber1
dayClassNameاعمال کلاس برای روزها براساس آرگومان(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string-
dayStyleاعمال استایل برای روزها براساس آرگومان(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties-
defaultMonthماه پیش‌فرض برای DatePickerRange غیرکنترلیDate-
defaultViewنمای پیش‌فرض DatePickerRange'date' | 'month' | 'year''date'
disabledDateمشخص کردن تاریخ‌هایی که قابل انتخاب نیستند(date: Date) => boolean-
disableOutOfMonthآیا روزهای خارج از ماه داده‌شده غیرفعال شوند؟booleanfalse
enableHeaderLabelآیا برچسب هدر برای تغییر نما غیرفعال شود؟booleantrue
firstDayOfWeekاولین روز هفته'sunday' | 'monday''monday'
hideOutOfMonthDatesآیا روزهای خارج از ماه داده‌شده مخفی شوند؟booleanfalse
hideWeekdaysآیا روزهای هفته مخفی شوند؟booleanfalse
isDateFirstInRangeهایلایت کردن تاریخ به عنوان اولین تاریخ در یک بازه(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean-
isDateInRangeهایلایت کردن تاریخ در یک بازه(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean-
isDateLastInRangeهایلایت کردن تاریخ به عنوان آخرین تاریخ در یک بازه(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean-
labelFormatفاصله‌گذاری بین نمایش تاریخ‌ها در ورودیstring'~'
localeمحلی‌سازی DatePickerRangedayjs localeen
maxDateحداکثر تاریخ قابل انتخابDate-
minDateحداقل تاریخ قابل انتخابDate-
monthLabelFormatفرمت برچسب ماهstring'YYYY'
onChangeتابع برگشتی هنگام انتخاب تاریخfunction(date: Date)-
onDayMouseEnterتابع برگشتی هنگام حرکت ماوس روی تاریخfunction(date: Date)-
paginateByصفحه‌بندی بر اساس تعداد نمایش‌هاnumberdateViewCount | 1
preventFocusممانعت از فوکوس هنگام کلیکbooleanfalse
rangeهایلایت کردن بازه تاریخ داده‌شده[Date | null, Date | null]-
renderDayرندر کردن عنصر سفارشی برای روزها بر اساس پارامترهای داده‌شده(date: Date) => ReactNodefalse
singleDateفقط یک تاریخ می‌تواند انتخاب شودbooleanfalse
valueمقدار تقویم (کنترل‌شده)[Date | null, Date | null]-
weekdayLabelFormatفرمت نمایش روزهای هفتهstring'dd'
weekendDaysمشخص کردن روزهای تعطیلات آخر هفتهnumber[][0, 6]
yearLabelFormatفرمت برچسب سالstring'YYYY'
فهرست مطالب
  • پایه (Basic)
  • محدوده (Range)
  • رندر سفارشی (Custom render)
  • تاریخ‌های غیرفعال مشخص (Disabled certain date)
  • تاریخ‌های غیرفعال خارج از دوره (Disable out of period date)
  • نمای چندتایی تاریخ (Multiple date view)
  • انتخاب چندگانه (Multiple selection)