Needless UI

元件

行事曆

以月、週、日或活動列表顯示活動，拖曳即可放到合適的位置。

匯入

import-scheduler.ts
import { NuiScheduler, type NuiSchedulerEvent } from '@needless-ui/angular/scheduler';

NuiScheduler

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

選擇器
nui-scheduler
名稱型別預設值說明
events輸入NuiSchedulerEvent<T>[][]要顯示的活動。
view雙向繫結'month' | 'week' | 'day' | 'agenda''week'目前顯示的檢視。
views輸入NuiSchedulerView[]all four使用者可以切換的檢視。
date雙向繫結NuiDatetoday顯示的日期，也是鍵盤焦點所在的日期。
slotMinutes輸入number30時間網格每列的分鐘數，也是活動移動的間隔。
scrollHour輸入number8時間網格開啟時捲動到的小時。
agendaDays輸入number30活動列表往後顯示的天數。
editable輸入booleanfalse可以用指標和鍵盤移動活動及調整時間長度。
selectable輸入booleanfalse可以在網格上選取時間，用來建立活動。
firstDay輸入1 … 7一週的第一天，1 代表星期一。預設依循地區設定。
headingLevel輸入number2標題的層級；活動列表中各天的標題再低一層。
locale輸入stringLOCALE_ID用來格式化日期和時間。
labels輸入Partial<NuiSchedulerLabels>行事曆顯示或朗讀的所有文字，供翻譯使用。
corners輸入NuiCorners邊角的形狀：round、squircle、bevel、scoop、notch 或 square。
radius輸入NuiRadius邊角的大小：none、small、medium、large 或 full。
density輸入NuiDensity佔用的空間：compact、regular 或 roomy。
eventClick輸出NuiSchedulerEvent<T>發出被點選或按 Enter 鍵開啟的活動。
eventChange輸出{ event, start, end }移動活動或調整時間長度後，發出活動的新時間。
slotSelect輸出{ start, end, allDay }發出在網格上選取的時間。
rangeChange輸出{ start, end }顯示的第一天和最後一天變更時，發出這兩天。

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

NuiSchedulerEvent

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

名稱型別預設值說明
id, title屬性string它的鍵值，以及顯示的內容。
start, end屬性NuiDateTime | NuiDate日期和時間；全天活動只用日期。
allDay屬性boolean預設取決於 start 是否不含時間。
tone屬性'accent' | 'neutral' | 'success' | 'warning' | 'danger''accent'它的顏色。
editable屬性boolean無論行事曆如何設定，它能否被移動。
data屬性T需要和它一起保存的其他資料。

NuiSchedulerEventTemplate

繪製活動。其 context 包含活動，以及文字形式的時間。

選擇器
ng-template[nuiSchedulerEvent]