Calendar

نصب

pnpm dlx @simurgh-ui/cli add calendar

import { Calendar, type CalendarProps } from '@simurgh-ui/react/calendar';
import { Calendar as VueCalendar } from '@simurgh-ui/vue/calendar';
import { CalendarComponent } from '@simurgh-ui/angular/calendar';
import '@simurgh-ui/styles/calendar.css';

پیش‌نمایش واقعی

Live component Calendar ◆

‹

August 2026

›

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

استفاده

<Calendar
  defaultValue="2026-08-12"
  defaultMonth="2026-08"
  name="appointment"
  label="تقویم وقت ملاقات"
  locale="fa-IR"
  direction="rtl"
  onValueChange={setDate}
/>

<Calendar
  v-model="date"
  v-model:month="month"
  name="appointment"
  label="تقویم وقت ملاقات"
/>

<simurgh-calendar
  [(value)]="date"
  [(month)]="month"
  name="appointment"
  label="تقویم وقت ملاقات"
/>

state و فرم

مقدار تاریخ با قالب ISO یعنی YYYY-MM-DD و ماه با YYYY-MM مبادله می‌شود. React حالت کنترل‌شده و default، Vue مدل‌های date/month و Angular bindingهای [(value)] و [(month)] را ارائه می‌دهند. name یک مقدار پنهان معتبر برای submit می‌سازد.

صفحه‌کلید و RTL

Tab وارد grid روزها می‌شود. Arrow بالا و پایین یک هفته، Home/End تا لبهٔ هفته و Enter یا Space برای انتخاب حرکت می‌کنند. Arrow چپ و راست در RTL معکوس می‌شوند. روز disabled باید از انتخاب خارج و دلیل محدودیت بیرون تقویم توضیح داده شود.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.