React 行事曆與資料表格

行事曆和資料表格也有 React 版本，位於 @needless-ui/react 中：功能、鍵盤操作和無障礙支援都和 Angular 版相同，樣式表和 MIT 授權也一樣。其他元件也會陸續推出。它們需要 React 19，可搭配 Next.js App Router 和 Vite 使用。

安裝

install.sh

pnpm add @needless-ui/react @needless-ui/css

匯入樣式

元件本身不含樣式。請在應用程式的一個 CSS 檔案中匯入一次樣式表。

globals.css

/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';

層的用法和 Angular 中相同：重設樣式放進一個在 nui 之前宣告的層中；使用 Tailwind CSS 時，把 nui 放在 Tailwind 的 base 層和 utilities 層之間，詳見開始使用。

行事曆

每個元件都有獨立的進入點。行事曆會顯示你傳入的 events，並在使用者移動活動或為新活動選取時間時呼叫你的回呼：活動由你自己保存。

planner.tsx

資料表格

請在元件外部定義 columns，這樣表格就不會在每次渲染時重做一遍。編輯會以新的列呼叫 onRowsChange，匯出 Excel 等方法則在表格的 ref 上。

orders.tsx

React 風格的 API

React 元件和 Angular 元件遵循相同的規格，因此兩者的 API 互相對應，只是換成了 React 的寫法。行事曆和資料表格的 API 頁面列出了所有 prop。

Angular API 及其在 React 中的對應
Angular	React
模型：`[(view)]`	狀態：`view` 搭配 `onViewChange`，或由元件自行保存的 `defaultView`
輸出：`(eventClick)`	回呼：`onEventClick`
範本：`<ng-template nuiSchedulerEvent>`	負責繪製的函式：`renderEvent`
方法：`scheduler.next()`	`ref` 上的方法：`ref.current.next()`
用於樹狀資料的 `children`	`getChildren`：React 把 `children` 留給元素使用
`locale`，預設為應用程式的 `LOCALE_ID`	`locale`，預設為 `en-US`

伺服器端渲染

兩個元件都能在伺服器端渲染，並在瀏覽器中水合。這個套件已把它們標記為用戶端元件，因此 Server Component 可以用可序列化的 props 渲染它們，nuiSchedulerFromIcs 等輔助函式也能在伺服器上執行。回呼無法傳到瀏覽器：接收回呼的元件要放進你自己的用戶端元件中，就像上面的兩個範例一樣。

取決於使用者環境的內容會等到瀏覽器中才顯示：行事曆上標示目前時間的線，以及今天是哪一天。由伺服器渲染行事曆時，請為它設定 defaultDate，因為伺服器上的今天不一定是使用者的今天。