Pangatur jadhwal lan grid data uga kasedhiya minangka komponen React, ing @needless-ui/react: fitur, keyboard lan aksesibilitas sing padha kaya ing Angular, stylesheet sing padha lan lisensi MIT sing padha. Komponen liyane bakal nyusul. Loro-lorone mbutuhake React 19, lan bisa mlaku karo Next.js App Router lan Vite.
Instalasi
pnpm add @needless-ui/react @needless-ui/cssImpor gaya
Komponen ora nggawa gaya. Impor stylesheet sepisan, saka salah siji berkas CSS ing aplikasi panjenengan.
/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';Layer mlaku kaya ing Angular: reset mlebu ing layer sadurunge nui, lan yen panjenengan ngagem Tailwind CSS, nui ana ing antarane base lan utilitas Tailwind, kaya sing dituduhake ing cara miwiti.
Pangatur jadhwal
Saben komponen duwe entry point dhewe. Pangatur jadhwal nampilake events sing panjenengan wenehake, lan ngabari panjenengan nalika pangguna mindhah acara utawa milih wektu kanggo acara anyar: acara-acarane panjenengan dhewe sing nyimpen.
Grid data
Terangna columns ing njaba komponen, supaya grid ora mbaleni pagaweyane saben render. Suntingan nyeluk onRowsChange kanthi baris anyar, lan metode kayata ekspor Excel ana ing ref grid.
API miturut istilah React
Komponen React ngetutake spesifikasi sing padha karo komponen Angular, dadi API-ne cocog, miturut istilah React. Kaca API ndhaptar saben prop: kaca pangatur jadhwal lan kaca grid data.
| Angular | React |
|---|---|
Model, [(view)] | Kahanan: view karo onViewChange, utawa defaultView supaya komponen sing nyimpen |
Output, (eventClick) | Callback, onEventClick |
Template, <ng-template nuiSchedulerEvent> | Fungsi sing nggambar, renderEvent |
Metode, scheduler.next() | Metode ing ref, ref.current.next() |
children, kanggo data wit | getChildren: React wis nganggo children kanggo elemen |
locale, gawane LOCALE_ID aplikasi | locale, gawane en-US |
Render ing server
Loro-lorone komponen di-render ing server lan di-hydrate ing browser. Paket iki menehi tandha minangka client component, dadi Server Component bisa nge-render komponen kasebut nganggo prop sing bisa diserialisasi, lan helper kayata nuiSchedulerFromIcs mlaku ing server. Callback ora bisa nyabrang menyang browser: komponen sing nampa callback kudu ana ing client component gawean panjenengan dhewe, kaya loro conto ing ndhuwur.
Apa sing gumantung marang sing maca ngenteni browser: garis sing nuduhake wektu saiki ing pangatur jadhwal, lan dina iki dina apa. Wenehana defaultDate marang pangatur jadhwal yen di-render dening server, amarga dina iki miturut server durung mesthi padha karo miturut sing maca.