API ya Kipanga ratiba kwa React

Kuingiza

import-scheduler.tsx

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

NuiScheduler

Matukio katika mwezi, wiki, siku, ajenda au mstari wa muda.

NuiScheduler: Sifa
Jina	Aina	Chaguomsingi	Maelezo
`events`Prop	`NuiSchedulerEvent<T>[]`	`[]`	Matukio ya kuonyesha.
`resources`Prop	`NuiSchedulerResource[]`	`[]`	Vyumba, watu au mashine: safu za mstari wa muda, na safu wima za siku na wiki.
`view` `defaultView` `onViewChange`Hali	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	Mwonekano unaoonyeshwa.
`views`Prop	`NuiSchedulerView[]`	`all`	Mionekano ambayo watumiaji wanaweza kubadili kati yake. Kwa chaguomsingi yote, ila mstari wa muda huwepo tu kukiwa na rasilimali.
`timelineSpan`Prop	`'day' \| 'week' \| 'month'`	`'day'`	Kile ambacho mstari wa muda huonyesha: siku kwa nafasi zake za muda, au wiki au mwezi kwa siku zake.
`date` `defaultDate` `onDateChange`Hali	`NuiDate`	`today`	Siku inayoonyeshwa, na mahali kibodi ilipo. Pitisha `defaultDate` seva inapoonyesha kipanga ratiba: “leo” yake huenda isiwe “leo” ya msomaji.
`slotMinutes`Prop	`number`	`30`	Dakika za kila safu ya gridi ya muda, au za kila safu wima ya mstari wa muda wa siku.
`snapMinutes`Prop	`number`	`slotMinutes`	Hatua ambayo matukio husogea na kubadilishwa ukubwa.
`dayStart, dayEnd`Prop	`number`	`0, 24`	Saa ambazo gridi ya muda huanzia na kuishia.
`scrollHour`Prop	`number`	`8`	Saa inayoonyeshwa gridi ya muda inapofunguka.
`agendaDays`Prop	`number`	`30`	Idadi ya siku zijazo ambazo ajenda huonyesha.
`businessHours`Prop	`NuiSchedulerHours[]`		Saa za kazi, kama `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }`. Muda mwingine hutiwa kivuli.
`weekends`Prop	`boolean`	`true`	Huonyesha wikendi. Ikizimwa, kila mwonekano huondoa wikendi ya locale.
`weekNumbers`Prop	`boolean`	`false`	Huonyesha namba za wiki za ISO katika mwezi, na juu ya saa.
`editable`Prop	`boolean`	`false`	Matukio yanaweza kuhamishwa na kubadilishwa ukubwa, kwa kipanya na kibodi.
`selectable`Prop	`boolean`	`false`	Muda unaweza kuchaguliwa kwenye gridi, ili kuunda matukio.
`allow`Prop	`(time) => boolean`		Huamua kama kuhamisha, kubadilisha ukubwa au kuchagua muda kunaweza kufanyika.
`toolbar`Prop	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	Huonyesha upau wa zana, au huchora wako mwenyewe kutokana na kile inachopewa.
`firstDay`Prop	`1 … 7`		Siku ya kwanza ya wiki, 1 kwa Jumatatu. Kwa chaguomsingi, ya locale.
`headingLevel`Prop	`number`	`2`	Kiwango cha heading cha kichwa; siku za ajenda ziko kiwango kimoja chini.
`locale`Prop	`string`	`'en-US'`	Huumbiza siku na saa.
`labels`Prop	`Partial<NuiSchedulerLabels>`		Kila maandishi ambayo kipanga ratiba huonyesha au hutangaza, ili kuyatafsiri.
`corners`Prop	`NuiCorners`		Umbo la pembe zake: `round`, `squircle`, `bevel`, `scoop`, `notch` au `square`.
`radius`Prop	`NuiRadius`		Ukubwa wa pembe zake: `none`, `small`, `medium`, `large` au `full`.
`density`Prop	`NuiDensity`		Nafasi kinayochukua: `compact`, `regular` au `roomy`.
`renderEvent`Render prop	`(event, { time }) => ReactNode`		Chora matukio wewe mwenyewe, kutokana na tukio na muda wake kama maandishi.
`renderResource`Render prop	`(resource) => ReactNode`		Chora vichwa vya rasilimali wewe mwenyewe.
`onEventClick`Callback	`(event: NuiSchedulerEvent<T>) => void`		Huitwa ikipewa tukio lililobofywa, au lililofunguliwa kwa Enter.
`onEventChange`Callback	`({ event, start, end, resource? }) => void`		Huitwa ikipewa nyakati mpya za tukio baada ya kuhamishwa au kubadilishwa ukubwa, na rasilimali zake zikibadilika. Sasisha `events` ili kuhifadhi badiliko.
`onSlotSelect`Callback	`({ start, end, allDay, resource? }) => void`		Huitwa ikipewa muda uliochaguliwa kwenye gridi, na rasilimali yake.
`onRangeChange`Callback	`({ start, end }) => void`		Huitwa ikipewa siku ya kwanza na ya mwisho zinazoonyeshwa zinapobadilika, ili upakie matukio ya siku hizo.
`ref`Prop	`Ref<NuiSchedulerHandle>`		Kile ambacho `ref` ya kipanga ratiba hufikia: kubadilisha kurasa, kwa upau wa zana wako mwenyewe.
`previous, next, goToday`Mbinu	`() => void`		Huonyesha ukurasa uliotangulia au unaofuata, au leo, kwa upau wa zana wako mwenyewe.
`title`Sifa	`string`		Kinachoonyeshwa, kama kichwa cha upau wa zana kinavyokisema.

Hali hufanya kazi kama input za React zenyewe: pitisha thamani na uisasishe kutoka callback yake ya on…Change, au pitisha thamani ya default… na uache kijenzi kiihifadhi.

Prop za ubinafsishaji usizoweka hufuata attribute ya data-nui-* iliyo karibu zaidi. Tazama mwongozo wa ubinafsishaji.

NuiSchedulerToolbar

Kile ambacho function ya toolbar hupokea, ili kuchora upau wa zana wako mwenyewe.

NuiSchedulerToolbar: Sifa
Jina	Aina	Maelezo
`title`Sifa	`string`	Kinachoonyeshwa, kama kichwa cha upau wa zana kinavyokisema.
`view, views`Sifa	`NuiSchedulerView, NuiSchedulerView[]`	Mwonekano unaoonyeshwa, na mionekano inayotolewa.
`setView, previous, next, goToday`Mbinu	`(view?) => void`	Hubadilisha mwonekano, huonyesha ukurasa uliotangulia au unaofuata, au huonyesha leo.

NuiSchedulerEvent

Tukio. Mwisho wa tukio lenye saa haujumuishwi; mwisho wa tukio la siku nzima ni siku yake ya mwisho.

NuiSchedulerEvent: Sifa
Jina	Aina	Chaguomsingi	Maelezo
`id, title`Sifa	`string`		Ufunguo wake, na kile linachoonyesha.
`start, end`Sifa	`NuiDateTime \| NuiDate`		Tarehe na saa, au tarehe tu kwa matukio ya siku nzima.
`allDay`Sifa	`boolean`		Kwa chaguomsingi, kama `start` haina saa.
`tone`Sifa	`'accent' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	Paleti yake.
`color, class`Sifa	`string`		Rangi yoyote ya CSS, inayoshinda toni yake, na class za kuliwekea mtindo.
`resource`Sifa	`string \| string[]`		Rasilimali ambazo tukio linahusishwa nazo.
`rrule`Sifa	`string`		Kanuni ya kurudia kutoka RFC 5545, kama `FREQ=WEEKLY;BYDAY=MO`.
`exdate`Sifa	`string[]`		Nyakati za kuanza za matukio ya mfululizo yasiyotokea.
`recurrenceId`Sifa	`NuiDateTime \| NuiDate`		Kwenye tukio la mfululizo ambalo kipanga ratiba huripoti: mwanzo uliotolewa na kanuni yake.
`editable`Sifa	`boolean`		Kama linaweza kuhamishwa, bila kujali kipanga ratiba kinasema nini.
`data`Sifa	`T`		Chochote kingine cha kuhifadhi pamoja nalo.

NuiSchedulerResource

Chumba, mtu au mashine ambayo matukio huhusishwa nayo.

NuiSchedulerResource: Sifa
Jina	Aina	Maelezo
`id, title`Sifa	`string`	Ufunguo wake, na jina linaloonyeshwa.
`tone, color`Sifa	`NuiSchedulerTone, string`	Rangi za matukio yake, yasipokuwa na zao wenyewe.
`businessHours`Sifa	`NuiSchedulerHours[]`	Wakati inapopatikana, badala ya saa za kazi za kipanga ratiba.
`data`Sifa	`R`	Chochote kingine cha kuhifadhi pamoja nayo.

Helpers

Function za matukio yanayojirudia na faili za iCalendar.

Helpers: Sifa
Jina	Aina	Maelezo
`nuiSchedulerOccurrences`Mbinu	`(event, first, last) => NuiSchedulerEvent[]`	Tukio jinsi linavyoonekana katika siku zilizotolewa: kwa tukio linalojirudia, kila mara linapotokea.
`nuiSchedulerRule`Mbinu	`(text: string) => NuiSchedulerRule \| null`	Husoma kanuni ya kurudia, au hurudisha null.
`nuiSchedulerToIcs`Mbinu	`(events, options?) => string`	Huandika matukio kama faili ya iCalendar.
`nuiSchedulerFromIcs`Mbinu	`(text, { timeZone? }) => NuiSchedulerEvent[]`	Husoma matukio ya faili ya iCalendar, nyakati zao zikiwa katika kanda moja ya saa.