API کامپوننت زمان‌بند برای React

ایمپورت

import-scheduler.tsx

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

NuiScheduler

رویدادها در نمای ماه، هفته، روز، برنامه یا خط زمانی.

NuiScheduler: ویژگی‌ها
نام	نوع	پیش‌فرض	توضیح
`events`پراپ	`NuiSchedulerEvent<T>[]`	`[]`	رویدادهایی که نمایش داده می‌شوند.
`resources`پراپ	`NuiSchedulerResource[]`	`[]`	اتاق‌ها، افراد یا دستگاه‌ها: ردیف‌های خط زمانی و ستون‌های نمای روز و هفته.
`view` `defaultView` `onViewChange`وضعیت	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	نمایی که نشان داده می‌شود.
`views`پراپ	`NuiSchedulerView[]`	`all`	نماهایی که کاربران می‌توانند بینشان جابه‌جا شوند. پیش‌فرض: همه، و خط زمانی فقط وقتی منبعی باشد.
`timelineSpan`پراپ	`'day' \| 'week' \| 'month'`	`'day'`	آنچه خط زمانی نشان می‌دهد: یک روز با بازه‌های زمانی‌اش، یا یک هفته یا ماه با روزهایش.
`date` `defaultDate` `onDateChange`وضعیت	`NuiDate`	`today`	روزی که نمایش داده می‌شود و جایی که فوکوس صفحه‌کلید است. وقتی سرور زمان‌بند را رندر می‌کند، `defaultDate` را بدهید: «امروزِ» سرور ممکن است «امروزِ» خواننده نباشد.
`slotMinutes`پراپ	`number`	`30`	دقیقه‌های هر ردیف جدول زمانی، یا هر ستون خط زمانی یک روز.
`snapMinutes`پراپ	`number`	`slotMinutes`	گامی که رویدادها با آن جابه‌جا می‌شوند و اندازه‌شان تغییر می‌کند.
`dayStart, dayEnd`پراپ	`number`	`0, 24`	ساعت شروع و پایان جدول زمانی.
`scrollHour`پراپ	`number`	`8`	ساعتی که جدول زمانی روی آن باز می‌شود.
`agendaDays`پراپ	`number`	`30`	تعداد روزهای پیش رو که نمای برنامه نشان می‌دهد.
`businessHours`پراپ	`NuiSchedulerHours[]`		ساعت‌های کاری، مثل `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }`. بقیهٔ زمان سایه‌دار می‌شود.
`weekends`پراپ	`boolean`	`true`	آخر هفته را نشان می‌دهد. بدون آن، همهٔ نماها آخر هفتهٔ زبان و منطقه را حذف می‌کنند.
`weekNumbers`پراپ	`boolean`	`false`	شمارهٔ هفته‌ها را طبق ISO در نمای ماه و بالای ساعت‌ها نشان می‌دهد.
`editable`پراپ	`boolean`	`false`	می‌توان رویدادها را با نشانگر و صفحه‌کلید جابه‌جا کرد و اندازه‌شان را تغییر داد.
`selectable`پراپ	`boolean`	`false`	می‌توان روی جدول، زمانی را برای ساختن رویداد انتخاب کرد.
`allow`پراپ	`(time) => boolean`		تعیین می‌کند که جابه‌جایی، تغییر اندازه یا انتخاب زمان مجاز است یا نه.
`toolbar`پراپ	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	نوار ابزار را نشان می‌دهد، یا با آنچه دریافت می‌کند نوار ابزار خودتان را رسم می‌کند.
`firstDay`پراپ	`1 … 7`		روز اول هفته؛ ۱ یعنی دوشنبه. پیش‌فرض: روز اول هفته در زبان و منطقه.
`headingLevel`پراپ	`number`	`2`	سطح سرتیتر عنوان؛ روزهای نمای برنامه یک سطح پایین‌ترند.
`locale`پراپ	`string`	`'en-US'`	روزها و ساعت‌ها را قالب‌بندی می‌کند.
`labels`پراپ	`Partial<NuiSchedulerLabels>`		همهٔ متن‌هایی که زمان‌بند نشان می‌دهد یا اعلام می‌کند، برای ترجمه.
`corners`پراپ	`NuiCorners`		شکل گوشه‌هایش: `round`، `squircle`، `bevel`، `scoop`، `notch` یا `square`.
`radius`پراپ	`NuiRadius`		اندازهٔ گوشه‌هایش: `none`، `small`، `medium`، `large` یا `full`.
`density`پراپ	`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`پراپ	`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، که بر پالتش مقدم است، و کلاس‌هایی برای استایل دادن به آن.
`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 را می‌خواند، با زمان‌هایشان در یک منطقهٔ زمانی.