الثيم كنز

المكوّنات

التقويم

شبكة الشهر وحدها، داخل الصفحة (الحجوزات، الكشوف، مواعيد التوصيل) أو داخل منتقي التاريخ. يوم واحد أو فترة بين بداية ونهاية. يبدأ الأسبوع حسب اللغة والمنطقة، وفي العربية تُقرأ الشبكة من اليمين إلى اليسار.

Figmaالمقابل في shadcncalendar

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.

npx ritla add calendar

ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/calendar

الاعتماديات التي يضيفها: react-day-picker, @phosphor-icons/react

التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

import { Calendar } from "@/components/ui/calendar";

const [day, setDay] = useState<Date | undefined>(new Date());

<Calendar mode="single" selected={day} onSelect={setDay} />

أمثلة

فترة

mode="range": البداية ثم النهاية، والأيام بينهما بشريط فاتح. اختيار نهاية قبل البداية يبدّلهما بهدوء.

احصل على الكود ›

أيام غير متاحة

disabled يعطّل الأيام التي لا تُختار (قبل أول موعد، أيام الجمعة)، وfooter يقول السبب تحت الشبكة، فلا تعتمد الحالة على اللون وحده.

احصل على الكود ›

مرجع الخصائص

Calendar

خصائص react-day-picker كلها، كما في Calendar من shadcn.

الخاصية	النوع	الافتراضي	الوصف
`mode`	`"single" \| "range" \| "multiple"`	لا يوجد	خاصية Mode: يوم واحد أو فترة.
`selected / onSelect`	`Date \| DateRange`	لا يوجد	اليوم أو الفترة المختارة.
`month / defaultMonth / onMonthChange`	`Date`	لا يوجد	الشهر المعروض. افتح على أول شهر متاح، لا شهرًا فارغًا.
`disabled`	`Matcher \| Matcher[]`	لا يوجد	الأيام التي لا تُختار؛ قل السبب في `footer`.
`weekStartsOn`	`0 to 6`	لا يوجد	الافتراضي من اللغة والمنطقة: الاثنين بالإنجليزية والسبت بالعربية، والأحد في ar-SA والاثنين في ar-AE.
`numberOfMonths`	`number`	`1`	شهران على سطح المكتب للفترات.
`framed`	`boolean`	`true`	لوحة Figma (إطار رمادي، زوايا 12، حشوة 16). أطفئها داخل قائمة لها لوحتها.
`numerals`	`"latn" \| "arab"`	لا يوجد	الافتراضي من `KanzProvider`.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`ArrowLeftArrowRight`	يومًا للسابق أو التالي؛ في العربية السهم الأيسر هو اليوم التالي.
`ArrowUpArrowDown`	أسبوعًا.
`PageUpPageDown`	شهرًا؛ ومع Shift سنة.
`HomeEnd`	طرفا الأسبوع.
`EnterSpace`	يختار اليوم.

ARIA

الشبكة role="grid" باسم الشهر، وكل يوم زر باسمه الكامل («الخميس، 17 سبتمبر 2026»)، مع «اليوم» و«محدد» حين يصح.
اسم الشهر في منطقة حيّة (aria-live="polite")، فيُعلَن حين يتغير.
زرّا الشهر السابق والتالي باسميهما بلغة الصفحة، ومساحة لمس 48 بكسل.

ملاحظات العربية والاتجاه

ينعكس

الشبكة: أول أيام الأسبوع على اليمين.
«الشهر السابق» في بداية السطر (اليمين) ويشير إلى اليمين، و«الشهر التالي» على اليسار.
شريط الفترة يمتد من اليمين إلى اليسار.

لا ينعكس

أرقام الأيام نفسها.

الأرقام: أرقام الأيام والسنة تتبع numerals.
الخط العربي: الأيام body-14 والعنوان label-16 بوزن Semibold. أسماء الأيام العربية من Intl بلا «ال» («سبت») وlabel-12، لتتسع لعمود 44 بكسل.
النص ثنائي الاتجاه: أسماء الأشهر العربية من يناير إلى ديسمبر، وهي المجموعة نفسها في بقية المنتج.