React API ng Scheduler · Needless UI

Import

import-scheduler.tsx

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

NuiScheduler

Mga event sa isang buwan, linggo, araw, agenda o timeline.

NuiScheduler: Mga property
Pangalan	Uri	Default	Paglalarawan
`events`Prop	`NuiSchedulerEvent<T>[]`	`[]`	Ang mga event na ipapakita.
`resources`Prop	`NuiSchedulerResource[]`	`[]`	Mga room, tao o makina: mga row ng timeline, at mga column ng araw at ng linggo.
`view` `defaultView` `onViewChange`State	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	Ang ipinapakitang view.
`views`Prop	`NuiSchedulerView[]`	`all`	Ang mga view na puwedeng pagpalipat-lipatan. Bilang default, lahat ng ito, pero may timeline lang kapag may mga resource.
`timelineSpan`Prop	`'day' \| 'week' \| 'month'`	`'day'`	Ang ipinapakita ng timeline: isang araw ayon sa mga slot nito, o isang linggo o buwan ayon sa mga araw nito.
`date` `defaultDate` `onDateChange`State	`NuiDate`	`today`	Ang ipinapakitang araw, at kung nasaan ang keyboard. Ipasa ang `defaultDate` kapag isang server ang nagre-render ng scheduler: baka iba ang “ngayon” nito sa “ngayon” ng nagbabasa.
`slotMinutes`Prop	`number`	`30`	Mga minuto bawat row ng time grid, o bawat column ng timeline ng isang araw.
`snapMinutes`Prop	`number`	`slotMinutes`	Ang step ng paglipat at pag-resize ng mga event.
`dayStart, dayEnd`Prop	`number`	`0, 24`	Mula anong oras at hanggang anong oras ang ipinapakita ng time grid.
`scrollHour`Prop	`number`	`8`	Ang oras kung saan bumubukas ang time grid.
`agendaDays`Prop	`number`	`30`	Ilang araw pasulong ang sakop ng agenda.
`businessHours`Prop	`NuiSchedulerHours[]`		Working hours, gaya ng `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }`. Naka-shade ang ibang oras.
`weekends`Prop	`boolean`	`true`	Ipinapakita ang weekend. Kapag wala ito, inaalis ng bawat view ang weekend ng locale.
`weekNumbers`Prop	`boolean`	`false`	Ipinapakita ang mga ISO week number sa buwan, at sa itaas ng mga oras.
`editable`Prop	`boolean`	`false`	Puwedeng ilipat at i-resize ang mga event, gamit ang pointer at keyboard.
`selectable`Prop	`boolean`	`false`	Puwedeng pumili ng oras sa grid, para gumawa ng mga event.
`allow`Prop	`(time) => boolean`		Nagpapasya kung puwedeng mangyari ang isang paglipat, pag-resize o pagpili ng oras.
`toolbar`Prop	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	Ipinapakita ang toolbar, o gumuguhit ng sarili mong toolbar mula sa ibinibigay dito.
`firstDay`Prop	`1 … 7`		Ang unang araw ng linggo, 1 para sa Lunes. Default ang sa locale.
`headingLevel`Prop	`number`	`2`	Ang heading level ng title; isang level na mas malalim ang mga araw ng agenda.
`locale`Prop	`string`	`'en-US'`	Fino-format ang mga araw at oras.
`labels`Prop	`Partial<NuiSchedulerLabels>`		Bawat text na ipinapakita o ina-announce ng scheduler, para maisalin.
`corners`Prop	`NuiCorners`		Ang hugis ng mga sulok nito: `round`, `squircle`, `bevel`, `scoop`, `notch` o `square`.
`radius`Prop	`NuiRadius`		Kung gaano kabilog ang mga sulok nito: `none`, `small`, `medium`, `large` o `full`.
`density`Prop	`NuiDensity`		Kung gaano kalaking espasyo ang kinukuha nito: `compact`, `regular` o `roomy`.
`renderEvent`Render prop	`(event, { time }) => ReactNode`		Ikaw ang gumuguhit ng mga event, mula sa event at sa oras nito bilang text.
`renderResource`Render prop	`(resource) => ReactNode`		Ikaw ang gumuguhit ng mga header ng mga resource.
`onEventClick`Callback	`(event: NuiSchedulerEvent<T>) => void`		Tinatawag kasama ang event na na-click, o binuksan gamit ang Enter.
`onEventChange`Callback	`({ event, start, end, resource? }) => void`		Tinatawag kasama ang mga bagong oras ng event pagkatapos itong ilipat o i-resize, at ang mga resource nito kapag nagbago ang mga ito. I-update ang `events` para mapanatili ang pagbabago.
`onSlotSelect`Callback	`({ start, end, allDay, resource? }) => void`		Tinatawag kasama ang oras na pinili sa grid, at ang resource nito.
`onRangeChange`Callback	`({ start, end }) => void`		Tinatawag kasama ang una at huling araw na ipinapakita kapag nagbago ang mga ito, para ma-load ang mga event nila.
`ref`Prop	`Ref<NuiSchedulerHandle>`		Ang naaabot ng `ref` ng scheduler: paglipat ng page, para sa sarili mong toolbar.
`previous, next, goToday`Method	`() => void`		Ipinapakita ang nauna o susunod na page, o ang araw ngayon, para sa sarili mong toolbar.
`title`Property	`string`		Ang ipinapakita, ayon sa pagkakasabi ng title ng toolbar.

Gumagana ang state gaya ng mga sariling input ng React: magpasa ng value at i-update ito mula sa on…Change callback nito, o magpasa ng default… na value at hayaang ang component ang mag-ingat nito.

Sinusunod ng mga customization prop na hindi mo sine-set ang pinakamalapit na data-nui-* attribute. Tingnan ang gabay sa pag-customize.

NuiSchedulerToolbar

Ang natatanggap ng isang toolbar function, para gumuhit ng sarili mong toolbar.

NuiSchedulerToolbar: Mga property
Pangalan	Uri	Paglalarawan
`title`Property	`string`	Ang ipinapakita, ayon sa pagkakasabi ng title ng toolbar.
`view, views`Property	`NuiSchedulerView, NuiSchedulerView[]`	Ang ipinapakitang view, at ang mga view na inaalok.
`setView, previous, next, goToday`Method	`(view?) => void`	Pinapalitan ang view, ipinapakita ang nauna o susunod na page, o ang araw ngayon.

NuiSchedulerEvent

Isang event. Hindi kasama ang dulo ng event na may oras; ang huling araw naman ang dulo ng all-day event.

NuiSchedulerEvent: Mga property
Pangalan	Uri	Default	Paglalarawan
`id, title`Property	`string`		Ang key nito, at ang ipinapakita nito.
`start, end`Property	`NuiDateTime \| NuiDate`		Mga petsa at oras, o mga petsa lang para sa mga all-day event.
`allDay`Property	`boolean`		Bilang default, all-day ito kapag walang oras ang `start`.
`tone`Property	`'accent' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	Ang palette nito.
`color, class`Property	`string`		Kahit anong CSS color, na nananaig sa tone nito, at mga class para i-style ito.
`resource`Property	`string \| string[]`		Ang mga resource na kinabibilangan nito.
`rrule`Property	`string`		Isang repeat rule mula sa RFC 5545, gaya ng `FREQ=WEEKLY;BYDAY=MO`.
`exdate`Property	`string[]`		Mga simula ng mga occurrence na hindi mangyayari.
`recurrenceId`Property	`NuiDateTime \| NuiDate`		Sa isang occurrence na iniuulat ng scheduler: ang simulang ibinigay dito ng rule nito.
`editable`Property	`boolean`		Kung puwede itong ilipat, anuman ang sabihin ng scheduler.
`data`Property	`T`		Kahit anong iba pang itatabi kasama nito.

NuiSchedulerResource

Isang room, tao o makina na kinabibilangan ng mga event.

NuiSchedulerResource: Mga property
Pangalan	Uri	Paglalarawan
`id, title`Property	`string`	Ang key nito, at ang pangalang ipinapakita nito.
`tone, color`Property	`NuiSchedulerTone, string`	Ang mga kulay ng mga event nito, maliban kung may sarili silang kulay.
`businessHours`Property	`NuiSchedulerHours[]`	Kung kailan ito available, kapalit ng working hours ng scheduler.
`data`Property	`R`	Kahit anong iba pang itatabi kasama nito.

Helpers

Mga function para sa mga recurring event at mga iCalendar file.

Helpers: Mga property
Pangalan	Uri	Paglalarawan
`nuiSchedulerOccurrences`Method	`(event, first, last) => NuiSchedulerEvent[]`	Isang event ayon sa paglabas nito sa mga ibinigay na araw: bawat occurrence ng isang recurring event.
`nuiSchedulerRule`Method	`(text: string) => NuiSchedulerRule \| null`	Binabasa ang isang repeat rule, o nagbabalik ng null.
`nuiSchedulerToIcs`Method	`(events, options?) => string`	Isinusulat ang mga event bilang iCalendar file.
`nuiSchedulerFromIcs`Method	`(text, { timeZone? }) => NuiSchedulerEvent[]`	Binabasa ang mga event ng isang iCalendar file, na nasa iisang time zone ang mga oras nila.