مرجع API لمكوّن المُجدوِل في React

الاستيراد

import-scheduler.tsx

import { NuiScheduler, type NuiSchedulerHandle } from '@needless-ui/react/scheduler';

NuiScheduler

أحداث في شهر أو أسبوع أو يوم أو جدول أعمال أو خط زمني.

NuiScheduler: الخصائص
الاسم	النوع	القيمة الافتراضية	الوصف
`events`خاصية (prop)	`NuiSchedulerEvent<T>[]`	`[]`	الأحداث المراد عرضها.
`resources`خاصية (prop)	`NuiSchedulerResource[]`	`[]`	القاعات أو الأشخاص أو الآلات: صفوف الخط الزمني، وأعمدة اليوم والأسبوع.
`view` `defaultView` `onViewChange`حالة	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	طريقة العرض الحالية.
`views`خاصية (prop)	`NuiSchedulerView[]`	`all`	طرق العرض التي يمكن للمستخدمين التبديل بينها. افتراضيًا كلها، والخط الزمني فقط حين توجد موارد.
`timelineSpan`خاصية (prop)	`'day' \| 'week' \| 'month'`	`'day'`	ما يعرضه الخط الزمني: يومًا بفتراته الزمنية، أو أسبوعًا أو شهرًا بأيامه.
`date` `defaultDate` `onDateChange`حالة	`NuiDate`	`today`	اليوم المعروض، وموضع تركيز لوحة المفاتيح. مرّر `defaultDate` حين يعرض خادمٌ المُجدوِل، لأن «اليوم» عند الخادم قد لا يكون «اليوم» عند القارئ.
`slotMinutes`خاصية (prop)	`number`	`30`	عدد الدقائق في كل صف من شبكة الأوقات، أو في كل عمود من الخط الزمني لليوم.
`snapMinutes`خاصية (prop)	`number`	`slotMinutes`	مقدار الخطوة التي تتحرك بها الأحداث وتتغير بها مدتها.
`dayStart, dayEnd`خاصية (prop)	`number`	`0, 24`	الساعة التي تبدأ بها شبكة الأوقات، والساعة التي تنتهي عندها.
`scrollHour`خاصية (prop)	`number`	`8`	الساعة التي تُفتح عندها شبكة الأوقات.
`agendaDays`خاصية (prop)	`number`	`30`	عدد الأيام القادمة التي يعرضها جدول الأعمال.
`businessHours`خاصية (prop)	`NuiSchedulerHours[]`		ساعات العمل، مثل `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }`. ويُظلَّل الوقت الآخر.
`weekends`خاصية (prop)	`boolean`	`true`	يعرض عطلة نهاية الأسبوع. وعند تعطيله، تستبعد كل طرق العرض عطلة نهاية الأسبوع التي تعتمدها اللغة والمنطقة.
`weekNumbers`خاصية (prop)	`boolean`	`false`	يعرض أرقام الأسابيع بمعيار ISO في عرض الشهر، وفوق الأوقات.
`editable`خاصية (prop)	`boolean`	`false`	يمكن نقل الأحداث وتغيير مدتها، بالمؤشر وبلوحة المفاتيح.
`selectable`خاصية (prop)	`boolean`	`false`	يمكن اختيار وقت على الشبكة، لإنشاء الأحداث.
`allow`خاصية (prop)	`(time) => boolean`		يقرر ما إذا كان النقل أو تغيير المدة أو اختيار الوقت ممكنًا.
`toolbar`خاصية (prop)	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	يعرض شريط الأدوات، أو يرسم شريطًا من صنعك بما يتلقاه.
`firstDay`خاصية (prop)	`1 … 7`		أول أيام الأسبوع، و1 هو الاثنين. وافتراضيًا، اليوم الذي تعتمده اللغة والمنطقة.
`headingLevel`خاصية (prop)	`number`	`2`	مستوى العنوان الرئيسي؛ وعناوين الأيام في جدول الأعمال أعمق بمستوى واحد.
`locale`خاصية (prop)	`string`	`'en-US'`	يُنسّق الأيام والأوقات.
`labels`خاصية (prop)	`Partial<NuiSchedulerLabels>`		كل نص يعرضه المُجدوِل أو يُعلنه، لترجمته.
`corners`خاصية (prop)	`NuiCorners`		شكل زواياه: `round` أو `squircle` أو `bevel` أو `scoop` أو `notch` أو `square`.
`radius`خاصية (prop)	`NuiRadius`		حجم زواياه: `none` أو `small` أو `medium` أو `large` أو `full`.
`density`خاصية (prop)	`NuiDensity`		المساحة التي يشغلها: `compact` أو `regular` أو `roomy`.
`renderEvent`دالة رسم	`(event, { time }) => ReactNode`		لرسم الأحداث بنفسك، من الحدث ووقته نصًّا.
`renderResource`دالة رسم	`(resource) => ReactNode`		لرسم عناوين الموارد بنفسك.
`onEventClick`دالة رد نداء	`(event: NuiSchedulerEvent<T>) => void`		تُستدعى مع الحدث الذي نُقر عليه، أو فُتح بمفتاح Enter.
`onEventChange`دالة رد نداء	`({ event, start, end, resource? }) => void`		تُستدعى مع الأوقات الجديدة للحدث بعد نقله أو تغيير مدته، ومع موارده إن تغيّرت. حدّث `events` لتحتفظ بالتغيير.
`onSlotSelect`دالة رد نداء	`({ start, end, allDay, resource? }) => void`		تُستدعى مع الوقت المختار على الشبكة، ومورده.
`onRangeChange`دالة رد نداء	`({ start, end }) => void`		تُستدعى مع أول يوم معروض وآخر يوم معروض عند تغيّرهما، لتُحمّل أحداث تلك الأيام.
`ref`خاصية (prop)	`Ref<NuiSchedulerHandle>`		ما يصل إليه `ref` المُجدوِل: التنقل بين الصفحات، لشريط أدوات من صنعك.
`previous, next, goToday`دالة	`() => void`		تعرض الصفحة السابقة أو التالية، أو اليوم، لشريط أدوات من صنعك.
`title`خاصية	`string`		ما هو معروض، كما يذكره عنوان شريط الأدوات.

تعمل الحالة كما تعمل عناصر الإدخال في React نفسها: مرّر قيمة وحدّثها من دالة رد النداء on…Change الخاصة بها، أو مرّر قيمة default… ودع المكوّن يحتفظ بها.

خصائص التخصيص التي تتركها دون ضبط تتبع أقرب سمة data-nui-*. راجع دليل التخصيص.

NuiSchedulerToolbar

ما تتلقاه دالة toolbar، لترسم شريط أدوات من صنعك.

NuiSchedulerToolbar: الخصائص
الاسم	النوع	الوصف
`title`خاصية	`string`	ما هو معروض، كما يذكره عنوان شريط الأدوات.
`view, views`خاصية	`NuiSchedulerView, NuiSchedulerView[]`	طريقة العرض الحالية، وطرق العرض المتاحة.
`setView, previous, next, goToday`دالة	`(view?) => void`	تبدّل طريقة العرض، أو تعرض الصفحة السابقة أو التالية، أو اليوم.

NuiSchedulerEvent

حدث واحد. لا تدخل نهاية الحدث المحدد بوقت ضمنه؛ أما نهاية الحدث الذي يستغرق اليوم كله فهي آخر أيامه.

NuiSchedulerEvent: الخصائص
الاسم	النوع	القيمة الافتراضية	الوصف
`id, title`خاصية	`string`		مفتاحه، وما يعرضه.
`start, end`خاصية	`NuiDateTime \| NuiDate`		تواريخ وأوقات، أو تواريخ فقط للأحداث التي تستغرق اليوم كله.
`allDay`خاصية	`boolean`		افتراضيًا، ما إذا كان `start` بلا وقت.
`tone`خاصية	`'accent' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	لوحة ألوانه.
`color, class`خاصية	`string`		أي لون في CSS، وله الأولوية على لوحة ألوانه، وأصناف (classes) لتنسيقه.
`resource`خاصية	`string \| string[]`		الموارد التي ينتمي إليها.
`rrule`خاصية	`string`		قاعدة تكرار من RFC 5545، مثل `FREQ=WEEKLY;BYDAY=MO`.
`exdate`خاصية	`string[]`		أوقات بدء التكرارات التي لا تحدث.
`recurrenceId`خاصية	`NuiDateTime \| NuiDate`		في التكرار الذي يُبلغ عنه المُجدوِل: البداية التي منحته إياها قاعدته.
`editable`خاصية	`boolean`		ما إذا كان يمكن نقله، أيًّا كان ما يحدده المُجدوِل.
`data`خاصية	`T`		أي شيء آخر يُحفظ معه.

NuiSchedulerResource

قاعة أو شخص أو آلة تنتمي إليها الأحداث.

NuiSchedulerResource: الخصائص
الاسم	النوع	الوصف
`id, title`خاصية	`string`	مفتاحه، والاسم الذي يعرضه.
`tone, color`خاصية	`NuiSchedulerTone, string`	ألوان أحداثه، ما لم تكن لها ألوانها الخاصة.
`businessHours`خاصية	`NuiSchedulerHours[]`	أوقات توفّره، بدلًا من ساعات عمل المُجدوِل.
`data`خاصية	`R`	أي شيء آخر يُحفظ معه.

Helpers

دوال للأحداث المتكررة وملفات iCalendar.

Helpers: الخصائص
الاسم	النوع	الوصف
`nuiSchedulerOccurrences`دالة	`(event, first, last) => NuiSchedulerEvent[]`	الحدث كما يظهر في الأيام المعطاة: كل تكرار من تكرارات الحدث المتكرر.
`nuiSchedulerRule`دالة	`(text: string) => NuiSchedulerRule \| null`	يقرأ قاعدة تكرار، أو يُعيد null.
`nuiSchedulerToIcs`دالة	`(events, options?) => string`	يكتب الأحداث في ملف iCalendar.
`nuiSchedulerFromIcs`دالة	`(text, { timeZone? }) => NuiSchedulerEvent[]`	يقرأ أحداث ملف iCalendar، بأوقاتها في منطقة زمنية واحدة.