تقویم (Calendar)

معرفی

کامپوننت Calendar یک تقویم پایه است که از تقویم شمسی (جلالی) و میلادی پشتیبانی می‌کند. این کامپوننت به‌طور مستقل یا به‌عنوان بخشی از DatePicker استفاده می‌شود.

چه زمانی استفاده نکنیم:

• وقتی کاربر باید تاریخ تایپ کند — از DatePicker استفاده کنید
• برای نمایش رویدادها — Calendar فقط انتخاب تاریخ است، نه تقویم رویداد

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

استفاده

import { Calendar } from '@parto-system-design/ui'
import { useState } from 'react'

export default function MyComponent() {
  const [selected, setSelected] = useState<Date>()

  return <Calendar mode="single" selected={selected} onSelect={setSelected} />
}

حالت‌ها و انواع

تقویم شمسی

تقویم میلادی

<Calendar mode="single" usePersianCalendar={false} />

انتخاب محدوده

<Calendar mode="range" usePersianCalendar />

راهنمای استفاده

جدول ویژگی‌ها

دسترسی‌پذیری

• پیمایش کامل با کیبورد (Arrow keys، Enter، Escape)
• aria-selected برای روز انتخاب‌شده
• aria-disabled برای روزهای غیرفعال
• ساختار شبکه روزها با role="gridcell"

مرتبط

• Date Picker — کامپوننت کامل انتخاب بازه تاریخ (پیشنهادی)
• Popover — برای قرار دادن Calendar داخل popup
• Form — برای استفاده در فرم‌ها با اعتبارسنجی

کامپوننت‌های مرتبط

• DatePicker — اگر نیاز به انتخاب تاریخ در فرم با input field و popover دارید، از DatePicker استفاده کنید
• DateRangePicker — اگر نیاز به انتخاب بازه تاریخی با label و امکانات بیشتر دارید، از DateRangePicker استفاده کنید
• PeriodSelector — اگر فقط نیاز به دوره‌های از پیش تعریف‌شده دارید (۷ روز، ۳۰ روز)، PeriodSelector ساده‌تر است