تقويم الأحداث

احصل على Ritla UI

شهر كامل بأحداثه كشرائح ملونة، أو قائمة بما هو قادم مجمّعة حسب اليوم.

افتح في Figma

المعاينة

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

التثبيت

أضف المكوّن
$ npx ritla add event-calendar
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/event-calendar
الاعتماديات التي يضيفها
@phosphor-icons/react
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

event-calendar.tsx

import { EventCalendar } from "@/components/ui/event-calendar";<EventCalendar  events={[{ id: "rent", date: "2026-09-01", title: "Rent due", tone: "warning" }]}  actions={<Button size="sm">Add event</Button>}/>

أمثلة

قائمة القادم

العناصر القادمة مجمّعة حسب اليوم، بشريط لوني ومبلغ في النهاية.

إنجليزيمعكوسعربي

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

← RTL

مرجع الخصائص

EventCalendar

الخاصية	النوع	الافتراضي	الوصف
`events`	`CalendarEvent[]`	لا يوجد	الأحداث: `id` و`date` بصيغة `YYYY-MM-DD` و`title` و`tone`.
`month / defaultMonth`	`Date`	لا يوجد	الشهر المعروض، متحكَّم به أو أولي.
`onMonthChange`	`(month: Date) => void`	لا يوجد	عند الانتقال إلى شهر آخر.
`today`	`Date`	`new Date()`	اليوم المميّز بالدائرة.
`weekStartsOn`	`number`	`0`	أول يوم في الأسبوع: 0 الأحد كما في Figma، و6 السبت.
`actions`	`ReactNode`	لا يوجد	في نهاية صف العنوان: مبدّل العرض وزر إضافة حدث.
`onEventClick`	`(event: CalendarEvent) => void`	لا يوجد	يجعل كل شريحة زرًا.
`maxEvents`	`number`	`3`	عدد الشرائح في اليوم قبل «+N أخرى».

CalendarEvent.tone

الخاصية	النوع	الافتراضي	الوصف
`tone`	`"brand" \| "warning" \| "success" \| "danger" \| "neutral"`	`"brand"`	خاصية Tone في `_Event chip`.

EventAgenda

الخاصية	النوع	الافتراضي	الوصف
`heading`	`ReactNode`	لا يوجد	العنوان، مثل «القادم».
`description`	`ReactNode`	لا يوجد	النص الداعم.
`events`	`AgendaEvent[]`	لا يوجد	الأحداث مع `time` و`kind` و`amount` و`amountTone`.

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

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

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

المفتاح	ما يفعله
`Tab`	ينتقل بين أزرار الشهر السابق والتالي واليوم، ثم الأحداث إن كانت أزرارًا.

ARIA

الشبكة جدول باسم الشهر، ورؤوس الأعمدة بأسماء الأيام كاملة في abbr.
كل يوم يقرأ تاريخه كاملًا، واليوم الحالي aria-current="date".
على الهاتف تصبح الشرائح نقاطًا، ويبقى عنوان كل حدث نصًا لقارئ الشاشة.
اسم الشهر يُعلَن عند تغييره.

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

ينعكس

الأسبوع يبدأ من اليمين في العربية، وأزرار السابق والتالي تنعكس.
شريط اللون في القائمة في بداية السطر والمبلغ في نهايته.

لا ينعكس

ترتيب الأسابيع من الأعلى إلى الأسفل.

الأرقام: أرقام الأيام والشهر تتبع إعداد الأرقام في RitlaProvider.
الخط العربي: أسماء الأيام المختصرة بلا «ال» («أحد»، «اثنين») لتتسع العمود.
النص ثنائي الاتجاه: عناوين الأحداث dir="auto"، والمبالغ معزولة.