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

绘制日程。上下文中包含日程及其文本形式的时间。

选择器
ng-template[nuiSchedulerEvent]