API React của Bộ lập lịch

Import

import-scheduler.tsx

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

NuiScheduler

Sự kiện theo tháng, tuần, ngày, lịch biểu hoặc timeline.

NuiScheduler: Thuộc tính
Tên	Kiểu	Mặc định	Mô tả
`events`Prop	`NuiSchedulerEvent<T>[]`	`[]`	Các sự kiện cần hiển thị.
`resources`Prop	`NuiSchedulerResource[]`	`[]`	Phòng, người hoặc máy móc: các dòng của timeline, và các cột của chế độ xem ngày và tuần.
`view` `defaultView` `onViewChange`State	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	Chế độ xem đang hiển thị.
`views`Prop	`NuiSchedulerView[]`	`all`	Các chế độ xem mà người dùng có thể chuyển qua lại. Mặc định là tất cả, riêng timeline chỉ có khi có tài nguyên.
`timelineSpan`Prop	`'day' \| 'week' \| 'month'`	`'day'`	Những gì timeline hiển thị: một ngày theo khung giờ, hoặc một tuần hay một tháng theo ngày.
`date` `defaultDate` `onDateChange`State	`NuiDate`	`today`	Ngày đang hiển thị, cũng là nơi focus bàn phím đang ở. Hãy truyền `defaultDate` khi máy chủ render bộ lập lịch: “hôm nay” của máy chủ có thể khác với của người đọc.
`slotMinutes`Prop	`number`	`30`	Số phút mỗi dòng của lưới thời gian, hoặc mỗi cột của timeline một ngày.
`snapMinutes`Prop	`number`	`slotMinutes`	Bước di chuyển và đổi độ dài của sự kiện.
`dayStart, dayEnd`Prop	`number`	`0, 24`	Giờ bắt đầu và kết thúc mà lưới thời gian hiển thị.
`scrollHour`Prop	`number`	`8`	Giờ hiển thị khi lưới thời gian mở ra.
`agendaDays`Prop	`number`	`30`	Số ngày mà lịch biểu xem trước.
`businessHours`Prop	`NuiSchedulerHours[]`		Giờ làm việc, chẳng hạn `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }`. Thời gian còn lại được tô mờ.
`weekends`Prop	`boolean`	`true`	Hiển thị cuối tuần. Nếu tắt, mọi chế độ xem đều bỏ các ngày cuối tuần theo locale.
`weekNumbers`Prop	`boolean`	`false`	Hiển thị số tuần ISO trong chế độ xem tháng, và phía trên cột giờ.
`editable`Prop	`boolean`	`false`	Sự kiện có thể được di chuyển và đổi độ dài, bằng con trỏ và bàn phím.
`selectable`Prop	`boolean`	`false`	Có thể chọn thời gian trên lưới để tạo sự kiện.
`allow`Prop	`(time) => boolean`		Quyết định một thao tác di chuyển, đổi độ dài hay chọn thời gian có được thực hiện hay không.
`toolbar`Prop	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	Hiển thị thanh công cụ, hoặc vẽ thanh công cụ của riêng bạn từ dữ liệu mà nó nhận được.
`firstDay`Prop	`1 … 7`		Ngày đầu tuần, 1 là thứ Hai. Mặc định theo locale.
`headingLevel`Prop	`number`	`2`	Cấp heading của tiêu đề; các ngày trong lịch biểu sâu hơn một cấp.
`locale`Prop	`string`	`'en-US'`	Định dạng ngày và giờ.
`labels`Prop	`Partial<NuiSchedulerLabels>`		Mọi văn bản mà bộ lập lịch hiển thị hoặc đọc lên, để dịch.
`corners`Prop	`NuiCorners`		Hình dạng các góc: `round`, `squircle`, `bevel`, `scoop`, `notch` hoặc `square`.
`radius`Prop	`NuiRadius`		Mức bo góc: `none`, `small`, `medium`, `large` hoặc `full`.
`density`Prop	`NuiDensity`		Lượng không gian mà component chiếm: `compact`, `regular` hoặc `roomy`.
`renderEvent`Render prop	`(event, { time }) => ReactNode`		Tự vẽ sự kiện, từ sự kiện và thời gian của nó dưới dạng văn bản.
`renderResource`Render prop	`(resource) => ReactNode`		Tự vẽ tiêu đề của tài nguyên.
`onEventClick`Callback	`(event: NuiSchedulerEvent<T>) => void`		Được gọi với sự kiện được nhấp, hoặc được mở bằng Enter.
`onEventChange`Callback	`({ event, start, end, resource? }) => void`		Được gọi với thời gian mới của sự kiện sau khi di chuyển hoặc đổi độ dài, cùng tài nguyên của nó nếu có thay đổi. Hãy cập nhật `events` để giữ thay đổi.
`onSlotSelect`Callback	`({ start, end, allDay, resource? }) => void`		Được gọi với thời gian được chọn trên lưới, cùng tài nguyên của nó.
`onRangeChange`Callback	`({ start, end }) => void`		Được gọi với ngày đầu tiên và cuối cùng đang hiển thị khi chúng thay đổi, để tải sự kiện của những ngày đó.
`ref`Prop	`Ref<NuiSchedulerHandle>`		Những gì `ref` của bộ lập lịch truy cập được: chuyển trang, cho thanh công cụ của riêng bạn.
`previous, next, goToday`Phương thức	`() => void`		Hiển thị trang trước hoặc sau, hoặc hôm nay, cho thanh công cụ của riêng bạn.
`title`Thuộc tính	`string`		Khoảng thời gian đang hiển thị, đúng như tiêu đề của thanh công cụ ghi.

State hoạt động như các trường nhập liệu của chính React: truyền một giá trị và cập nhật nó từ callback on…Change, hoặc truyền giá trị default… để component tự giữ.

Các prop tùy biến mà bạn không đặt sẽ lấy giá trị từ thuộc tính data-nui-* gần nhất. Xem hướng dẫn tùy biến.

NuiSchedulerToolbar

Những gì một hàm toolbar nhận được, để vẽ thanh công cụ của riêng bạn.

NuiSchedulerToolbar: Thuộc tính
Tên	Kiểu	Mô tả
`title`Thuộc tính	`string`	Khoảng thời gian đang hiển thị, đúng như tiêu đề của thanh công cụ ghi.
`view, views`Thuộc tính	`NuiSchedulerView, NuiSchedulerView[]`	Chế độ xem đang hiển thị, và các chế độ xem có sẵn.
`setView, previous, next, goToday`Phương thức	`(view?) => void`	Đổi chế độ xem, hiển thị trang trước hoặc sau, hoặc hôm nay.

NuiSchedulerEvent

Một sự kiện. Điểm kết thúc của sự kiện có giờ không được tính vào; còn sự kiện cả ngày kết thúc vào ngày cuối cùng của nó.

NuiSchedulerEvent: Thuộc tính
Tên	Kiểu	Mặc định	Mô tả
`id, title`Thuộc tính	`string`		Khóa của nó, và nội dung nó hiển thị.
`start, end`Thuộc tính	`NuiDateTime \| NuiDate`		Ngày và giờ, hoặc chỉ ngày với sự kiện cả ngày.
`allDay`Thuộc tính	`boolean`		Theo mặc định, là sự kiện cả ngày khi `start` không có giờ.
`tone`Thuộc tính	`'accent' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	Bảng màu của nó.
`color, class`Thuộc tính	`string`		Một màu CSS bất kỳ, được ưu tiên hơn tông màu, và các class để tạo kiểu cho nó.
`resource`Thuộc tính	`string \| string[]`		Các tài nguyên mà sự kiện thuộc về.
`rrule`Thuộc tính	`string`		Một quy tắc lặp lại theo RFC 5545, chẳng hạn `FREQ=WEEKLY;BYDAY=MO`.
`exdate`Thuộc tính	`string[]`		Thời điểm bắt đầu của những lần lặp không diễn ra.
`recurrenceId`Thuộc tính	`NuiDateTime \| NuiDate`		Trên một lần lặp mà bộ lập lịch báo về: thời điểm bắt đầu mà quy tắc đã định cho nó.
`editable`Thuộc tính	`boolean`		Sự kiện có di chuyển được hay không, bất kể bộ lập lịch quy định thế nào.
`data`Thuộc tính	`T`		Mọi thứ khác cần giữ kèm sự kiện.

NuiSchedulerResource

Một phòng, một người hoặc một máy mà các sự kiện thuộc về.

NuiSchedulerResource: Thuộc tính
Tên	Kiểu	Mô tả
`id, title`Thuộc tính	`string`	Khóa của nó, và tên nó hiển thị.
`tone, color`Thuộc tính	`NuiSchedulerTone, string`	Màu của các sự kiện thuộc về nó, trừ khi sự kiện có màu riêng.
`businessHours`Thuộc tính	`NuiSchedulerHours[]`	Thời gian tài nguyên này khả dụng, thay cho giờ làm việc của bộ lập lịch.
`data`Thuộc tính	`R`	Mọi thứ khác cần giữ kèm tài nguyên.

Helpers

Các hàm cho sự kiện lặp lại và tệp iCalendar.

Helpers: Thuộc tính
Tên	Kiểu	Mô tả
`nuiSchedulerOccurrences`Phương thức	`(event, first, last) => NuiSchedulerEvent[]`	Một sự kiện như nó hiển thị trong những ngày đã cho: từng lần lặp của sự kiện lặp lại.
`nuiSchedulerRule`Phương thức	`(text: string) => NuiSchedulerRule \| null`	Đọc một quy tắc lặp lại, hoặc trả về null.
`nuiSchedulerToIcs`Phương thức	`(events, options?) => string`	Ghi các sự kiện thành một tệp iCalendar.
`nuiSchedulerFromIcs`Phương thức	`(text, { timeZone? }) => NuiSchedulerEvent[]`	Đọc các sự kiện của một tệp iCalendar, với thời gian quy về một múi giờ.