Needless UI

元件

行事曆

以月、週、日、活動列表，或會議室和人員的時間軸顯示活動，拖曳即可放到合適的位置。

匯入

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

NuiScheduler

依月、週、日、活動列表或時間軸顯示的活動。

名稱型別預設值說明
eventspropNuiSchedulerEvent<T>[][]要顯示的活動。
resourcespropNuiSchedulerResource[][]會議室、人員或設備：時間軸的列，以及日檢視和週檢視的欄。
view
defaultView
onViewChange狀態		'month' | 'week' | 'day' | 'agenda' | 'timeline''week'目前顯示的檢視。
viewspropNuiSchedulerView[]all使用者可以切換的檢視。預設為全部檢視，其中時間軸只在有資源時提供。
timelineSpanprop'day' | 'week' | 'month''day'時間軸顯示的範圍：按時段顯示一天，或按日顯示一週或一個月。
date
defaultDate
onDateChange狀態		NuiDatetoday顯示的日期，也是鍵盤焦點所在的日期。由伺服器渲染行事曆時，請傳入 defaultDate：伺服器上的今天不一定是使用者的今天。
slotMinutespropnumber30時間網格每列的分鐘數，或單日時間軸每欄的分鐘數。
snapMinutespropnumberslotMinutes活動移動和調整時間長度的間隔。
dayStart, dayEndpropnumber0, 24時間網格顯示的起訖時間。
scrollHourpropnumber8時間網格開啟時捲動到的小時。
agendaDayspropnumber30活動列表往後顯示的天數。
businessHourspropNuiSchedulerHours[]工作時間，例如 { days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }。其他時間會以灰底標示。
weekendspropbooleantrue顯示週末。關閉時，所有檢視都會省略地區設定中的週末。
weekNumberspropbooleanfalse在月檢視中和時間欄上方顯示 ISO 週數。
editablepropbooleanfalse可以用指標和鍵盤移動活動及調整時間長度。
selectablepropbooleanfalse可以在網格上選取時間，用來建立活動。
allowprop(time) => boolean決定移動、調整時間長度或選取時間能否進行。
toolbarpropboolean | ((toolbar: NuiSchedulerToolbar) => ReactNode)true顯示工具列，或根據收到的資訊繪製你自己的工具列。
firstDayprop1 … 7一週的第一天，1 代表星期一。預設依循地區設定。
headingLevelpropnumber2標題的層級；活動列表中各天的標題再低一層。
localepropstring'en-US'用來格式化日期和時間。
labelspropPartial<NuiSchedulerLabels>行事曆顯示或朗讀的所有文字，供翻譯使用。
cornerspropNuiCorners邊角的形狀：round、squircle、bevel、scoop、notch 或 square。
radiuspropNuiRadius邊角的大小：none、small、medium、large 或 full。
densitypropNuiDensity佔用的空間：compact、regular 或 roomy。
renderEvent渲染 prop(event, { time }) => ReactNode自行繪製活動，參數為活動及其文字形式的時間。
renderResource渲染 prop(resource) => ReactNode自行繪製資源的標題。
onEventClick回呼(event: NuiSchedulerEvent<T>) => void活動被點選或按 Enter 鍵開啟時呼叫，參數為該活動。
onEventChange回呼({ event, start, end, resource? }) => void移動活動或調整時間長度後呼叫，參數為活動的新時間；資源有變更時，也包含新的資源。若要保留這次變更，請更新 events。
onSlotSelect回呼({ start, end, allDay, resource? }) => void在網格上選取時間後呼叫，參數為該時間及其資源。
onRangeChange回呼({ start, end }) => void顯示的第一天和最後一天變更時呼叫，參數為這兩天，方便載入其中的活動。
refpropRef<NuiSchedulerHandle>行事曆的 ref 能呼叫的方法：翻頁，供自訂的工具列使用。
previous, next, goToday方法() => void顯示上一頁、下一頁或今天，供自訂的工具列使用。
title屬性string目前顯示的內容，說法和工具列的標題相同。

狀態的用法和 React 內建的表單輸入相同：傳入一個值，並在它的 on…Change 回呼中更新；或是傳入 default… 值，讓元件自己保存。

用於客製化的 prop 如果未設定，會沿用最近的 data-nui-* 屬性。詳見客製化指南。

NuiSchedulerToolbar

toolbar 函式收到的參數，用來繪製你自己的工具列。

名稱型別預設值說明
title屬性string目前顯示的內容，說法和工具列的標題相同。
view, views屬性NuiSchedulerView, NuiSchedulerView[]目前顯示的檢視，以及可供切換的檢視。
setView, previous, next, goToday方法(view?) => void切換檢視，或顯示上一頁、下一頁或今天。

NuiSchedulerEvent

一個活動。有具體時間的活動不包含結束時刻；全天活動的結束日期就是它的最後一天。

名稱型別預設值說明
id, title屬性string它的鍵值，以及顯示的內容。
start, end屬性NuiDateTime | NuiDate日期和時間；全天活動只用日期。
allDay屬性boolean預設取決於 start 是否不含時間。
tone屬性'accent' | 'neutral' | 'success' | 'warning' | 'danger''accent'它的配色。
color, class屬性string任何 CSS 顏色（優先於配色），以及用來設定樣式的類別。
resource屬性string | string[]它所屬的資源。
rrule屬性stringRFC 5545 的重複規則，例如 FREQ=WEEKLY;BYDAY=MO。
exdate屬性string[]不會發生的各次活動的開始時間。
recurrenceId屬性NuiDateTime | NuiDate出現在行事曆回報的單次活動上：規則為它排定的開始時間。
editable屬性boolean無論行事曆如何設定，它能否被移動。
data屬性T需要和它一起保存的其他資料。

NuiSchedulerResource

活動所屬的會議室、人員或設備。

名稱型別預設值說明
id, title屬性string它的鍵值，以及顯示的名稱。
tone, color屬性NuiSchedulerTone, string其活動的顏色，除非活動有自己的顏色。
businessHours屬性NuiSchedulerHours[]它的可用時間，用來取代行事曆的工作時間。
data屬性R需要和它一起保存的其他資料。

Helpers

處理週期性活動和 iCalendar 檔案的函式。

名稱型別預設值說明
nuiSchedulerOccurrences方法(event, first, last) => NuiSchedulerEvent[]活動在指定日期中的顯示方式：週期性活動會展開為其中的每一次。
nuiSchedulerRule方法(text: string) => NuiSchedulerRule | null解析重複規則，無法解析時傳回 null。
nuiSchedulerToIcs方法(events, options?) => string把活動寫成 iCalendar 檔案。
nuiSchedulerFromIcs方法(text, { timeZone? }) => NuiSchedulerEvent[]讀取 iCalendar 檔案中的活動，並把時間統一到同一個時區。