API Penjadwal untuk React

Impor

import-scheduler.tsx

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

NuiScheduler

Acara per bulan, minggu, hari, dalam agenda, atau di timeline.

NuiScheduler: Properti
Nama	Tipe	Default	Deskripsi
`events`Prop	`NuiSchedulerEvent<T>[]`	`[]`	Acara yang ditampilkan.
`resources`Prop	`NuiSchedulerResource[]`	`[]`	Ruangan, orang, atau mesin: baris di timeline, dan kolom di tampilan hari dan minggu.
`view` `defaultView` `onViewChange`State	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	Tampilan saat ini.
`views`Prop	`NuiSchedulerView[]`	`all`	Tampilan yang bisa dipilih pengguna. Default-nya semua, timeline hanya jika ada sumber daya.
`timelineSpan`Prop	`'day' \| 'week' \| 'month'`	`'day'`	Yang ditampilkan timeline: sehari per slot, atau seminggu atau sebulan per hari.
`date` `defaultDate` `onDateChange`State	`NuiDate`	`today`	Hari yang ditampilkan, sekaligus posisi keyboard. Teruskan `defaultDate` saat penjadwal dirender di server: “hari ini” di server belum tentu sama dengan milik pembaca.
`slotMinutes`Prop	`number`	`30`	Menit per baris grid waktu, atau per kolom timeline sehari.
`snapMinutes`Prop	`number`	`slotMinutes`	Langkah pergeseran dan perubahan ukuran acara.
`dayStart, dayEnd`Prop	`number`	`0, 24`	Jam awal dan akhir yang ditampilkan grid waktu.
`scrollHour`Prop	`number`	`8`	Jam yang terlihat saat grid waktu dibuka.
`agendaDays`Prop	`number`	`30`	Berapa hari ke depan yang dicakup agenda.
`businessHours`Prop	`NuiSchedulerHours[]`		Jam kerja, misalnya `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }`. Waktu lainnya diarsir.
`weekends`Prop	`boolean`	`true`	Menampilkan akhir pekan. Tanpanya, setiap tampilan menyembunyikan akhir pekan sesuai locale.
`weekNumbers`Prop	`boolean`	`false`	Menampilkan nomor minggu ISO di tampilan bulan, dan di atas kolom waktu.
`editable`Prop	`boolean`	`false`	Acara bisa dipindah dan diubah ukurannya, dengan pointer maupun keyboard.
`selectable`Prop	`boolean`	`false`	Waktu bisa dipilih di grid untuk membuat acara.
`allow`Prop	`(time) => boolean`		Menentukan apakah pemindahan, perubahan ukuran, atau pemilihan waktu boleh terjadi.
`toolbar`Prop	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	Menampilkan toolbar, atau menggambar toolbar buatan Anda dari data yang diterimanya.
`firstDay`Prop	`1 … 7`		Hari pertama dalam minggu, 1 untuk Senin. Default-nya mengikuti locale.
`headingLevel`Prop	`number`	`2`	Level heading untuk judul; hari-hari di agenda satu level lebih dalam.
`locale`Prop	`string`	`'en-US'`	Memformat hari dan waktu.
`labels`Prop	`Partial<NuiSchedulerLabels>`		Semua teks yang ditampilkan atau diumumkan penjadwal, untuk diterjemahkan.
`corners`Prop	`NuiCorners`		Bentuk sudut: `round`, `squircle`, `bevel`, `scoop`, `notch`, atau `square`.
`radius`Prop	`NuiRadius`		Seberapa bulat sudutnya: `none`, `small`, `medium`, `large`, atau `full`.
`density`Prop	`NuiDensity`		Seberapa banyak ruang yang digunakan komponen: `compact`, `regular`, atau `roomy`.
`renderEvent`Render prop	`(event, { time }) => ReactNode`		Untuk menggambar acara sendiri, dari acara dan waktunya dalam bentuk teks.
`renderResource`Render prop	`(resource) => ReactNode`		Untuk menggambar header sumber daya sendiri.
`onEventClick`Callback	`(event: NuiSchedulerEvent<T>) => void`		Dipanggil dengan acara yang diklik, atau dibuka dengan Enter.
`onEventChange`Callback	`({ event, start, end, resource? }) => void`		Dipanggil dengan waktu baru acara setelah dipindah atau diubah ukurannya, serta sumber dayanya jika berubah. Perbarui `events` untuk menyimpan perubahan.
`onSlotSelect`Callback	`({ start, end, allDay, resource? }) => void`		Dipanggil dengan waktu yang dipilih di grid, beserta sumber dayanya.
`onRangeChange`Callback	`({ start, end }) => void`		Dipanggil dengan hari pertama dan terakhir yang ditampilkan saat keduanya berubah, untuk memuat acaranya.
`ref`Prop	`Ref<NuiSchedulerHandle>`		Yang bisa dijangkau lewat `ref` penjadwal: perpindahan halaman, untuk toolbar buatan sendiri.
`previous, next, goToday`Metode	`() => void`		Menampilkan halaman sebelumnya atau berikutnya, atau hari ini, untuk toolbar buatan sendiri.
`title`Properti	`string`		Apa yang ditampilkan, seperti yang tertulis di judul toolbar.

State bekerja seperti input bawaan React: teruskan nilai dan perbarui lewat callback on…Change-nya, atau teruskan nilai default… dan biarkan komponen yang menyimpannya.

Prop kustomisasi yang tidak Anda atur akan mengikuti atribut data-nui-* terdekat. Lihat panduan kustomisasi.

NuiSchedulerToolbar

Yang diterima fungsi toolbar, untuk menggambar toolbar buatan sendiri.

NuiSchedulerToolbar: Properti
Nama	Tipe	Deskripsi
`title`Properti	`string`	Apa yang ditampilkan, seperti yang tertulis di judul toolbar.
`view, views`Properti	`NuiSchedulerView, NuiSchedulerView[]`	Tampilan saat ini, dan tampilan yang tersedia.
`setView, previous, next, goToday`Metode	`(view?) => void`	Mengganti tampilan, menampilkan halaman sebelumnya atau berikutnya, atau hari ini.

NuiSchedulerEvent

Sebuah acara. Akhir acara berwaktu tidak termasuk; akhir acara sepanjang hari adalah hari terakhirnya.

NuiSchedulerEvent: Properti
Nama	Tipe	Default	Deskripsi
`id, title`Properti	`string`		Kuncinya, dan teks yang ditampilkannya.
`start, end`Properti	`NuiDateTime \| NuiDate`		Tanggal dan waktu, atau tanggal saja untuk acara sepanjang hari.
`allDay`Properti	`boolean`		Default-nya aktif jika `start` tidak memiliki waktu.
`tone`Properti	`'accent' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	Paletnya.
`color, class`Properti	`string`		Warna CSS apa pun, yang menimpa tone-nya, serta class untuk menatanya.
`resource`Properti	`string \| string[]`		Sumber daya yang memiliki acara ini.
`rrule`Properti	`string`		Aturan pengulangan dari RFC 5545, misalnya `FREQ=WEEKLY;BYDAY=MO`.
`exdate`Properti	`string[]`		Waktu mulai kemunculan yang tidak berlangsung.
`recurrenceId`Properti	`NuiDateTime \| NuiDate`		Pada kemunculan yang dilaporkan penjadwal: waktu mulai yang diberikan aturannya.
`editable`Properti	`boolean`		Apakah acara ini bisa dipindah, apa pun pengaturan penjadwal.
`data`Properti	`T`		Data lain apa pun yang ingin disimpan bersamanya.

NuiSchedulerResource

Ruangan, orang, atau mesin yang memiliki acara.

NuiSchedulerResource: Properti
Nama	Tipe	Deskripsi
`id, title`Properti	`string`	Kuncinya, dan nama yang ditampilkannya.
`tone, color`Properti	`NuiSchedulerTone, string`	Warna acaranya, kecuali acara itu punya warna sendiri.
`businessHours`Properti	`NuiSchedulerHours[]`	Kapan sumber daya ini tersedia, menggantikan jam kerja penjadwal.
`data`Properti	`R`	Data lain apa pun yang ingin disimpan bersamanya.

Helpers

Fungsi untuk acara berulang dan file iCalendar.

Helpers: Properti
Nama	Tipe	Deskripsi
`nuiSchedulerOccurrences`Metode	`(event, first, last) => NuiSchedulerEvent[]`	Acara sebagaimana tampil pada hari-hari yang diberikan: setiap kemunculan acara berulang.
`nuiSchedulerRule`Metode	`(text: string) => NuiSchedulerRule \| null`	Membaca aturan pengulangan, atau mengembalikan null.
`nuiSchedulerToIcs`Metode	`(events, options?) => string`	Menulis acara sebagai file iCalendar.
`nuiSchedulerFromIcs`Metode	`(text, { timeZone? }) => NuiSchedulerEvent[]`	Membaca acara dari file iCalendar, dengan waktunya dalam satu zona waktu.