API Pangatur jadhwal kanggo React

Import

import-scheduler.tsx

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

NuiScheduler

Acara ing sasi, minggu, dina, agenda utawa linimasa.

NuiScheduler: Properti
Jeneng	Jinis	Gawan	Katrangan
`events`Prop	`NuiSchedulerEvent<T>[]`	`[]`	Acara sing ditampilake.
`resources`Prop	`NuiSchedulerResource[]`	`[]`	Ruangan, wong utawa mesin: baris ing linimasa, lan kolom ing tampilan dina lan minggu.
`view` `defaultView` `onViewChange`Kahanan	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	Tampilan sing katon.
`views`Prop	`NuiSchedulerView[]`	`all`	Tampilan sing bisa digonta-ganti pangguna. Gawane kabeh, linimasa mung yen ana sumber daya.
`timelineSpan`Prop	`'day' \| 'week' \| 'month'`	`'day'`	Apa sing ditampilake linimasa: sadina miturut slot wektune, utawa saminggu utawa sasasi miturut dinane.
`date` `defaultDate` `onDateChange`Kahanan	`NuiDate`	`today`	Dina sing ditampilake, lan posisi keyboard. Wenehana `defaultDate` yen server sing nge-render pangatur jadhwal: dina iki miturut server durung mesthi padha karo miturut sing maca.
`slotMinutes`Prop	`number`	`30`	Menit saben baris ing grid wektu, utawa saben kolom ing linimasa sadina.
`snapMinutes`Prop	`number`	`slotMinutes`	Langkah obahe acara nalika dipindhah lan diowahi ukurane.
`dayStart, dayEnd`Prop	`number`	`0, 24`	Jam wiwitan lan pungkasan sing ditampilake grid wektu.
`scrollHour`Prop	`number`	`8`	Jam sing katon nalika grid wektu dibukak.
`agendaDays`Prop	`number`	`30`	Cacahe dina ing ngarep sing ditampilake agenda.
`businessHours`Prop	`NuiSchedulerHours[]`		Jam kerja, kayata `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }`. Wektu liyane disuremake.
`weekends`Prop	`boolean`	`true`	Nampilake akhir minggu. Yen dipateni, saben tampilan ngilangi akhir minggu miturut locale.
`weekNumbers`Prop	`boolean`	`false`	Nampilake nomer minggu ISO ing sasi, lan ing ndhuwur wektu.
`editable`Prop	`boolean`	`false`	Acara bisa dipindhah lan diowahi ukurane, nganggo pointer lan keyboard.
`selectable`Prop	`boolean`	`false`	Wektu bisa dipilih ing grid, kanggo nggawe acara.
`allow`Prop	`(time) => boolean`		Nemtokake apa pamindhahan, owah-owahan ukuran utawa pilihan wektu bisa kelakon.
`toolbar`Prop	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	Nampilake toolbar, utawa nggambar toolbar gawean panjenengan dhewe saka apa sing ditampa.
`firstDay`Prop	`1 … 7`		Dina kapisan ing saminggu, 1 kanggo Senen. Gawane, miturut locale.
`headingLevel`Prop	`number`	`2`	Level heading judhul; dina-dina ing agenda siji level luwih jero.
`locale`Prop	`string`	`'en-US'`	Ngformat dina lan wektu.
`labels`Prop	`Partial<NuiSchedulerLabels>`		Saben teks sing ditampilake utawa diumumake pangatur jadhwal, kanggo diterjemahake.
`corners`Prop	`NuiCorners`		Wangun pojoke: `round`, `squircle`, `bevel`, `scoop`, `notch` utawa `square`.
`radius`Prop	`NuiRadius`		Sepira gedhene pojoke: `none`, `small`, `medium`, `large` utawa `full`.
`density`Prop	`NuiDensity`		Sepira akehe papan sing dienggo: `compact`, `regular` utawa `roomy`.
`renderEvent`Render prop	`(event, { time }) => ReactNode`		Panjenengan nggambar acara dhewe, saka acara lan wektune minangka teks.
`renderResource`Render prop	`(resource) => ReactNode`		Panjenengan nggambar header sumber daya dhewe.
`onEventClick`Callback	`(event: NuiSchedulerEvent<T>) => void`		Diceluk karo acara sing diklik, utawa dibukak nganggo Enter.
`onEventChange`Callback	`({ event, start, end, resource? }) => void`		Diceluk karo wektu anyar acara sawise dipindhah utawa diowahi ukurane, lan sumber dayane yen owah. Anyarana `events` supaya owah-owahane tetep.
`onSlotSelect`Callback	`({ start, end, allDay, resource? }) => void`		Diceluk karo wektu sing dipilih ing grid, lan sumber dayane.
`onRangeChange`Callback	`({ start, end }) => void`		Diceluk karo dina kapisan lan pungkasan sing ditampilake nalika owah, kanggo ngemot acara-acarane.
`ref`Prop	`Ref<NuiSchedulerHandle>`		Apa sing bisa digayuh liwat `ref` pangatur jadhwal: ganti kaca, kanggo toolbar gawean panjenengan dhewe.
`previous, next, goToday`Metode	`() => void`		Nampilake kaca sadurunge utawa sabanjure, utawa dina iki, kanggo toolbar gawean panjenengan dhewe.
`title`Properti	`string`		Apa sing ditampilake, kaya sing ditulis judhul toolbar.

Kahanan mlaku kaya input React dhewe: wenehana nilai lan anyarana saka callback on…Change-e, utawa wenehana nilai default… lan komponen sing nyimpen.

Prop kustomisasi sing ora panjenengan setel bakal ngetutake attribute data-nui-* sing paling cedhak. Pirsani pandhuan kustomisasi.

NuiSchedulerToolbar

Apa sing ditampa fungsi toolbar, kanggo nggambar toolbar gawean panjenengan dhewe.

NuiSchedulerToolbar: Properti
Jeneng	Jinis	Katrangan
`title`Properti	`string`	Apa sing ditampilake, kaya sing ditulis judhul toolbar.
`view, views`Properti	`NuiSchedulerView, NuiSchedulerView[]`	Tampilan sing katon, lan tampilan sing kasedhiya.
`setView, previous, next, goToday`Metode	`(view?) => void`	Ngganti tampilan, nampilake kaca sadurunge utawa sabanjure, utawa dina iki.

NuiSchedulerEvent

Siji acara. Pungkasane acara sing duwe jam ora klebu; pungkasane acara sadina muput yaiku dina pungkasane.

NuiSchedulerEvent: Properti
Jeneng	Jinis	Gawan	Katrangan
`id, title`Properti	`string`		Kuncine, lan apa sing ditampilake.
`start, end`Properti	`NuiDateTime \| NuiDate`		Tanggal lan wektu, utawa tanggal wae kanggo acara sadina muput.
`allDay`Properti	`boolean`		Gawane, apa `start` ora duwe wektu.
`tone`Properti	`'accent' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	Palet wernane.
`color, class`Properti	`string`		Werna CSS apa wae, sing ngalahake palete, lan class kanggo nggawe gayane.
`resource`Properti	`string \| string[]`		Sumber daya sing dadi panggonane.
`rrule`Properti	`string`		Aturan mbaleni saka RFC 5545, kayata `FREQ=WEEKLY;BYDAY=MO`.
`exdate`Properti	`string[]`		Wektu wiwitan kedadeyan sing ora dianakake.
`recurrenceId`Properti	`NuiDateTime \| NuiDate`		Ing kedadeyan sing dilaporake pangatur jadhwal: wiwitan sing diwenehake aturane.
`editable`Properti	`boolean`		Apa acara bisa dipindhah, apa wae sing dikandhakake pangatur jadhwal.
`data`Properti	`T`		Apa wae liyane sing disimpen bareng acara.

NuiSchedulerResource

Ruangan, wong utawa mesin sing dadi panggonane acara.

NuiSchedulerResource: Properti
Jeneng	Jinis	Katrangan
`id, title`Properti	`string`	Kuncine, lan jeneng sing ditampilake.
`tone, color`Properti	`NuiSchedulerTone, string`	Werna acara-acarane, kajaba acarane duwe werna dhewe.
`businessHours`Properti	`NuiSchedulerHours[]`	Wektu kasedhiyane, minangka gantine jam kerja pangatur jadhwal.
`data`Properti	`R`	Apa wae liyane sing disimpen bareng sumber daya iki.

Helpers

Fungsi kanggo acara sing mbaleni lan berkas iCalendar.

Helpers: Properti
Jeneng	Jinis	Katrangan
`nuiSchedulerOccurrences`Metode	`(event, first, last) => NuiSchedulerEvent[]`	Acara kaya sing katon ing dina-dina sing diwenehake: saben kedadeyan saka acara sing mbaleni.
`nuiSchedulerRule`Metode	`(text: string) => NuiSchedulerRule \| null`	Maca aturan mbaleni, utawa mbalekake null.
`nuiSchedulerToIcs`Metode	`(events, options?) => string`	Nulis acara dadi berkas iCalendar.
`nuiSchedulerFromIcs`Metode	`(text, { timeZone? }) => NuiSchedulerEvent[]`	Maca acara saka berkas iCalendar, kanthi wektune ing siji zona wektu.