API สำหรับ React ของ Scheduler

Import

import-scheduler.tsx

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

NuiScheduler

กิจกรรมในมุมมองเดือน สัปดาห์ วัน กำหนดการ หรือไทม์ไลน์

NuiScheduler: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`events`Prop	`NuiSchedulerEvent<T>[]`	`[]`	กิจกรรมที่จะแสดง
`resources`Prop	`NuiSchedulerResource[]`	`[]`	ห้อง บุคคล หรือเครื่องจักร ซึ่งเป็นแถวของไทม์ไลน์ และเป็นคอลัมน์ของมุมมองวันและสัปดาห์
`view` `defaultView` `onViewChange`สถานะ	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	มุมมองที่แสดงอยู่
`views`Prop	`NuiSchedulerView[]`	`all`	มุมมองที่ผู้ใช้สลับไปมาได้ ค่าเริ่มต้นคือทุกมุมมอง โดยไทม์ไลน์จะมีเฉพาะเมื่อมีทรัพยากร
`timelineSpan`Prop	`'day' \| 'week' \| 'month'`	`'day'`	สิ่งที่ไทม์ไลน์แสดง คือหนึ่งวันตามช่องเวลา หรือหนึ่งสัปดาห์หรือหนึ่งเดือนตามวัน
`date` `defaultDate` `onDateChange`สถานะ	`NuiDate`	`today`	วันที่แสดงอยู่ และตำแหน่งของโฟกัสคีย์บอร์ด เมื่อเซิร์ฟเวอร์เรนเดอร์ Scheduler ให้ส่ง `defaultDate` เพราะวันนี้ของเซิร์ฟเวอร์อาจไม่ใช่วันนี้ของผู้อ่าน
`slotMinutes`Prop	`number`	`30`	จำนวนนาทีต่อแถวในตารางเวลา หรือต่อคอลัมน์ในไทม์ไลน์ของหนึ่งวัน
`snapMinutes`Prop	`number`	`slotMinutes`	ระยะที่กิจกรรมเลื่อนและปรับขนาดในแต่ละครั้ง
`dayStart, dayEnd`Prop	`number`	`0, 24`	ชั่วโมงเริ่มต้นและชั่วโมงสิ้นสุดที่ตารางเวลาแสดง
`scrollHour`Prop	`number`	`8`	ชั่วโมงที่ตารางเวลาแสดงเมื่อเปิดขึ้นมา
`agendaDays`Prop	`number`	`30`	จำนวนวันข้างหน้าที่กำหนดการแสดง
`businessHours`Prop	`NuiSchedulerHours[]`		เวลาทำงาน เช่น `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }` เวลาที่เหลือจะถูกแรเงา
`weekends`Prop	`boolean`	`true`	แสดงวันหยุดสุดสัปดาห์ หากไม่ใช้ ทุกมุมมองจะซ่อนวันหยุดสุดสัปดาห์ตาม locale
`weekNumbers`Prop	`boolean`	`false`	แสดงหมายเลขสัปดาห์แบบ ISO ในมุมมองเดือน และเหนือคอลัมน์เวลา
`editable`Prop	`boolean`	`false`	ย้ายและปรับขนาดกิจกรรมได้ ทั้งด้วยตัวชี้และคีย์บอร์ด
`selectable`Prop	`boolean`	`false`	เลือกเวลาบนตารางได้ เพื่อสร้างกิจกรรม
`allow`Prop	`(time) => boolean`		ตัดสินว่าการย้าย การปรับขนาด หรือการเลือกเวลาจะเกิดขึ้นได้หรือไม่
`toolbar`Prop	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	แสดงแถบเครื่องมือ หรือวาดแถบเครื่องมือของคุณเองจากสิ่งที่ได้รับ
`firstDay`Prop	`1 … 7`		วันแรกของสัปดาห์ โดย 1 คือวันจันทร์ ค่าเริ่มต้นเป็นไปตาม locale
`headingLevel`Prop	`number`	`2`	ระดับหัวข้อของหัวเรื่อง ส่วนวันในกำหนดการจะลึกลงไปอีกหนึ่งระดับ
`locale`Prop	`string`	`'en-US'`	ใช้จัดรูปแบบวันและเวลา
`labels`Prop	`Partial<NuiSchedulerLabels>`		ข้อความทุกส่วนที่ Scheduler แสดงหรือประกาศ สำหรับการแปล
`corners`Prop	`NuiCorners`		รูปทรงของมุม: `round` `squircle` `bevel` `scoop` `notch` หรือ `square`
`radius`Prop	`NuiRadius`		ขนาดของมุม: `none` `small` `medium` `large` หรือ `full`
`density`Prop	`NuiDensity`		พื้นที่ที่ใช้: `compact` `regular` หรือ `roomy`
`renderEvent`Render prop	`(event, { time }) => ReactNode`		วาดกิจกรรมเองจากตัวกิจกรรมและเวลาในรูปแบบข้อความ
`renderResource`Render prop	`(resource) => ReactNode`		วาดส่วนหัวของทรัพยากรเอง
`onEventClick`Callback	`(event: NuiSchedulerEvent<T>) => void`		ถูกเรียกพร้อมกิจกรรมที่ถูกคลิกหรือถูกเปิดด้วย Enter
`onEventChange`Callback	`({ event, start, end, resource? }) => void`		ถูกเรียกพร้อมเวลาใหม่ของกิจกรรมหลังการย้ายหรือปรับขนาด รวมถึงทรัพยากรเมื่อมีการเปลี่ยน ให้อัปเดต `events` เพื่อเก็บการเปลี่ยนแปลงไว้
`onSlotSelect`Callback	`({ start, end, allDay, resource? }) => void`		ถูกเรียกพร้อมเวลาที่เลือกบนตารางและทรัพยากรของเวลานั้น
`onRangeChange`Callback	`({ start, end }) => void`		ถูกเรียกพร้อมวันแรกและวันสุดท้ายที่แสดงเมื่อมีการเปลี่ยนแปลง เพื่อโหลดกิจกรรมของช่วงนั้น
`ref`Prop	`Ref<NuiSchedulerHandle>`		สิ่งที่เข้าถึงได้ผ่าน `ref` ของ Scheduler คือการเปลี่ยนหน้า สำหรับแถบเครื่องมือที่คุณสร้างเอง
`previous, next, goToday`เมธอด	`() => void`		แสดงหน้าก่อนหน้าหรือถัดไป หรือวันนี้ สำหรับแถบเครื่องมือที่คุณสร้างเอง
`title`พร็อพเพอร์ตี	`string`		สิ่งที่กำลังแสดงอยู่ ตามที่หัวเรื่องของแถบเครื่องมือบอก

สถานะทำงานเหมือน input ของ React เอง คือส่งค่าเข้าไปแล้วอัปเดตจาก callback on…Change ของค่านั้น หรือส่งค่า default… แล้วปล่อยให้คอมโพเนนต์เก็บค่าไว้เอง

Prop สำหรับการปรับแต่งที่ไม่ได้กำหนดค่าไว้ จะใช้ค่าตาม attribute data-nui-* ที่อยู่ใกล้ที่สุด ดูคู่มือการปรับแต่ง

NuiSchedulerToolbar

สิ่งที่ฟังก์ชัน toolbar ได้รับ เพื่อวาดแถบเครื่องมือของคุณเอง

NuiSchedulerToolbar: พร็อพเพอร์ตี
ชื่อ	ชนิด	คำอธิบาย
`title`พร็อพเพอร์ตี	`string`	สิ่งที่กำลังแสดงอยู่ ตามที่หัวเรื่องของแถบเครื่องมือบอก
`view, views`พร็อพเพอร์ตี	`NuiSchedulerView, NuiSchedulerView[]`	มุมมองที่แสดงอยู่ และมุมมองที่มีให้เลือก
`setView, previous, next, goToday`เมธอด	`(view?) => void`	สลับมุมมอง แสดงหน้าก่อนหน้าหรือถัดไป หรือแสดงวันนี้

NuiSchedulerEvent

กิจกรรมหนึ่งรายการ กิจกรรมที่ระบุเวลาจะไม่นับเวลาสิ้นสุดรวมไว้ ส่วนวันสิ้นสุดของกิจกรรมทั้งวันคือวันสุดท้ายของกิจกรรม

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`พร็อพเพอร์ตี	`string`		กฎการเกิดซ้ำตาม RFC 5545 เช่น `FREQ=WEEKLY;BYDAY=MO`
`exdate`พร็อพเพอร์ตี	`string[]`		เวลาเริ่มของครั้งที่ไม่เกิดขึ้น
`recurrenceId`พร็อพเพอร์ตี	`NuiDateTime \| NuiDate`		มีในแต่ละครั้งที่ Scheduler รายงาน คือเวลาเริ่มที่กฎกำหนดให้ครั้งนั้น
`editable`พร็อพเพอร์ตี	`boolean`		ย้ายกิจกรรมนี้ได้หรือไม่ ไม่ว่า Scheduler จะตั้งค่าไว้อย่างไร
`data`พร็อพเพอร์ตี	`T`		ข้อมูลอื่นที่ต้องการเก็บไว้กับกิจกรรม

NuiSchedulerResource

ห้อง บุคคล หรือเครื่องจักรที่กิจกรรมสังกัดอยู่

NuiSchedulerResource: พร็อพเพอร์ตี
ชื่อ	ชนิด	คำอธิบาย
`id, title`พร็อพเพอร์ตี	`string`	คีย์ของทรัพยากร และชื่อที่แสดง
`tone, color`พร็อพเพอร์ตี	`NuiSchedulerTone, string`	สีของกิจกรรมในทรัพยากรนี้ เว้นแต่กิจกรรมจะมีสีของตัวเอง
`businessHours`พร็อพเพอร์ตี	`NuiSchedulerHours[]`	ช่วงเวลาที่ทรัพยากรนี้ว่าง ใช้แทนเวลาทำงานของ Scheduler
`data`พร็อพเพอร์ตี	`R`	ข้อมูลอื่นที่ต้องการเก็บไว้กับทรัพยากร

Helpers

ฟังก์ชันสำหรับกิจกรรมที่เกิดซ้ำและไฟล์ iCalendar

Helpers: พร็อพเพอร์ตี
ชื่อ	ชนิด	คำอธิบาย
`nuiSchedulerOccurrences`เมธอด	`(event, first, last) => NuiSchedulerEvent[]`	กิจกรรมตามที่แสดงในวันที่กำหนด หากเป็นกิจกรรมที่เกิดซ้ำจะได้ทุกครั้งที่เกิด
`nuiSchedulerRule`เมธอด	`(text: string) => NuiSchedulerRule \| null`	อ่านกฎการเกิดซ้ำ หรือคืนค่า null
`nuiSchedulerToIcs`เมธอด	`(events, options?) => string`	เขียนกิจกรรมเป็นไฟล์ iCalendar
`nuiSchedulerFromIcs`เมธอด	`(text, { timeZone? }) => NuiSchedulerEvent[]`	อ่านกิจกรรมจากไฟล์ iCalendar โดยให้เวลาอยู่ในเขตเวลาเดียว