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 文件中的日程，并把时间统一到一个时区。