React ಗಾಗಿ Scheduler API

ಇಂಪೋರ್ಟ್

import-scheduler.tsx

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

NuiScheduler

ತಿಂಗಳು, ವಾರ, ದಿನ, ಕಾರ್ಯಸೂಚಿ ಅಥವಾ ಟೈಮ್‌ಲೈನ್‌ನಲ್ಲಿ ಈವೆಂಟ್‌ಗಳು.

NuiScheduler: ಪ್ರಾಪರ್ಟಿಗಳು
ಹೆಸರು	ಪ್ರಕಾರ	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
`events`ಪ್ರಾಪ್	`NuiSchedulerEvent<T>[]`	`[]`	ತೋರಿಸಬೇಕಾದ ಈವೆಂಟ್‌ಗಳು.
`resources`ಪ್ರಾಪ್	`NuiSchedulerResource[]`	`[]`	ಕೊಠಡಿಗಳು, ಜನರು ಅಥವಾ ಯಂತ್ರಗಳು: ಟೈಮ್‌ಲೈನ್‌ನ ಸಾಲುಗಳು, ಮತ್ತು ದಿನ ಹಾಗೂ ವಾರದ ಕಾಲಮ್‌ಗಳು.
`view` `defaultView` `onViewChange`ಸ್ಥಿತಿ	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	ತೋರಿಸಿದ ನೋಟ.
`views`ಪ್ರಾಪ್	`NuiSchedulerView[]`	`all`	ಬಳಕೆದಾರರು ಬದಲಾಯಿಸಬಹುದಾದ ನೋಟಗಳು. ಡೀಫಾಲ್ಟ್ ಆಗಿ ಎಲ್ಲವೂ; ಟೈಮ್‌ಲೈನ್ ಸಂಪನ್ಮೂಲಗಳಿದ್ದಾಗ ಮಾತ್ರ.
`timelineSpan`ಪ್ರಾಪ್	`'day' \| 'week' \| 'month'`	`'day'`	ಟೈಮ್‌ಲೈನ್ ಏನು ತೋರಿಸುತ್ತದೆ: ಸ್ಲಾಟ್‌ಗಳಾಗಿ ಒಂದು ದಿನ, ಅಥವಾ ದಿನಗಳಾಗಿ ಒಂದು ವಾರ ಅಥವಾ ತಿಂಗಳು.
`date` `defaultDate` `onDateChange`ಸ್ಥಿತಿ	`NuiDate`	`today`	ತೋರಿಸಿದ ದಿನ, ಮತ್ತು ಕೀಬೋರ್ಡ್ ಇರುವ ಜಾಗ. ಸರ್ವರ್ ಶೆಡ್ಯೂಲರ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುವಾಗ `defaultDate` ನೀಡಿ: ಸರ್ವರ್‌ನ ಇಂದಿನ ದಿನಾಂಕ ಓದುಗರದ್ದೇ ಆಗಿರಬೇಕಿಲ್ಲ.
`slotMinutes`ಪ್ರಾಪ್	`number`	`30`	ಸಮಯದ ಗ್ರಿಡ್‌ನ ಪ್ರತಿ ಸಾಲಿನ, ಅಥವಾ ದಿನದ ಟೈಮ್‌ಲೈನ್‌ನ ಪ್ರತಿ ಕಾಲಮ್‌ನ ನಿಮಿಷಗಳು.
`snapMinutes`ಪ್ರಾಪ್	`number`	`slotMinutes`	ಈವೆಂಟ್‌ಗಳು ಸರಿಯುವ ಮತ್ತು ಗಾತ್ರ ಬದಲಾಗುವ ಹೆಜ್ಜೆ.
`dayStart, dayEnd`ಪ್ರಾಪ್	`number`	`0, 24`	ಸಮಯದ ಗ್ರಿಡ್ ತೋರಿಸುವ ಗಂಟೆಗಳು: ಎಲ್ಲಿಂದ, ಎಲ್ಲಿಯವರೆಗೆ.
`scrollHour`ಪ್ರಾಪ್	`number`	`8`	ಸಮಯದ ಗ್ರಿಡ್ ತೆರೆಯುವ ಗಂಟೆ.
`agendaDays`ಪ್ರಾಪ್	`number`	`30`	ಕಾರ್ಯಸೂಚಿ ಮುಂದೆ ನೋಡುವ ದಿನಗಳು.
`businessHours`ಪ್ರಾಪ್	`NuiSchedulerHours[]`		ಕೆಲಸದ ಸಮಯ, ಉದಾಹರಣೆಗೆ `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }`. ಉಳಿದ ಸಮಯ ಮಬ್ಬಾಗಿ ಕಾಣುತ್ತದೆ.
`weekends`ಪ್ರಾಪ್	`boolean`	`true`	ವಾರಾಂತ್ಯವನ್ನು ತೋರಿಸುತ್ತದೆ. ಇದು ಇಲ್ಲದಿದ್ದರೆ, ಪ್ರತಿ ನೋಟವೂ ಲೊಕೇಲ್‌ನ ವಾರಾಂತ್ಯವನ್ನು ಬಿಡುತ್ತದೆ.
`weekNumbers`ಪ್ರಾಪ್	`boolean`	`false`	ತಿಂಗಳಲ್ಲಿ, ಮತ್ತು ಸಮಯಗಳ ಮೇಲೆ ISO ವಾರದ ಸಂಖ್ಯೆಗಳನ್ನು ತೋರಿಸುತ್ತದೆ.
`editable`ಪ್ರಾಪ್	`boolean`	`false`	ಪಾಯಿಂಟರ್ ಮತ್ತು ಕೀಬೋರ್ಡ್‌ನಿಂದ ಈವೆಂಟ್‌ಗಳನ್ನು ಸರಿಸಬಹುದು, ಗಾತ್ರ ಬದಲಿಸಬಹುದು.
`selectable`ಪ್ರಾಪ್	`boolean`	`false`	ಈವೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಗ್ರಿಡ್‌ನಲ್ಲಿ ಸಮಯ ಆರಿಸಬಹುದು.
`allow`ಪ್ರಾಪ್	`(time) => boolean`		ಸರಿಸುವುದು, ಗಾತ್ರ ಬದಲಿಸುವುದು ಅಥವಾ ಸಮಯದ ಆಯ್ಕೆ ನಡೆಯಬಹುದೇ ಎಂದು ನಿರ್ಧರಿಸುತ್ತದೆ.
`toolbar`ಪ್ರಾಪ್	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	ಟೂಲ್‌ಬಾರ್ ಅನ್ನು ತೋರಿಸುತ್ತದೆ, ಅಥವಾ ತನಗೆ ಸಿಕ್ಕಿದ್ದರಿಂದ ನಿಮ್ಮದೇ ಟೂಲ್‌ಬಾರ್ ಅನ್ನು ಬಿಡಿಸುತ್ತದೆ.
`firstDay`ಪ್ರಾಪ್	`1 … 7`		ವಾರದ ಮೊದಲ ದಿನ, ಸೋಮವಾರಕ್ಕೆ 1. ಡೀಫಾಲ್ಟ್ ಆಗಿ, ಲೊಕೇಲ್‌ನದು.
`headingLevel`ಪ್ರಾಪ್	`number`	`2`	ಶೀರ್ಷಿಕೆಯ ಹೆಡಿಂಗ್ ಮಟ್ಟ; ಕಾರ್ಯಸೂಚಿಯ ದಿನಗಳು ಒಂದು ಮಟ್ಟ ಕೆಳಗೆ.
`locale`ಪ್ರಾಪ್	`string`	`'en-US'`	ದಿನ ಮತ್ತು ಸಮಯಗಳನ್ನು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡುತ್ತದೆ.
`labels`ಪ್ರಾಪ್	`Partial<NuiSchedulerLabels>`		ಅನುವಾದಿಸಲು, ಶೆಡ್ಯೂಲರ್ ತೋರಿಸುವ ಅಥವಾ ಘೋಷಿಸುವ ಪ್ರತಿಯೊಂದು ಪಠ್ಯ.
`corners`ಪ್ರಾಪ್	`NuiCorners`		ಇದರ ಮೂಲೆಗಳ ಆಕಾರ: `round`, `squircle`, `bevel`, `scoop`, `notch` ಅಥವಾ `square`.
`radius`ಪ್ರಾಪ್	`NuiRadius`		ಇದರ ಮೂಲೆಗಳು ಎಷ್ಟು ದೊಡ್ಡದಾಗಿರುತ್ತವೆ: `none`, `small`, `medium`, `large` ಅಥವಾ `full`.
`density`ಪ್ರಾಪ್	`NuiDensity`		ಇದು ಎಷ್ಟು ಜಾಗ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ: `compact`, `regular` ಅಥವಾ `roomy`.
`renderEvent`ರೆಂಡರ್ ಪ್ರಾಪ್	`(event, { time }) => ReactNode`		ಈವೆಂಟ್ ಮತ್ತು ಪಠ್ಯವಾಗಿ ಅದರ ಸಮಯದಿಂದ ಈವೆಂಟ್‌ಗಳನ್ನು ನೀವೇ ಬಿಡಿಸುತ್ತೀರಿ.
`renderResource`ರೆಂಡರ್ ಪ್ರಾಪ್	`(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`		ತೋರಿಸಿದ ಮೊದಲ ಮತ್ತು ಕೊನೆಯ ದಿನಗಳು ಬದಲಾದಾಗ ಅವುಗಳೊಂದಿಗೆ ಕರೆಯಲಾಗುತ್ತದೆ, ಅವುಗಳ ಈವೆಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು.
`ref`ಪ್ರಾಪ್	`Ref<NuiSchedulerHandle>`		ಶೆಡ್ಯೂಲರ್‌ನ `ref` ಮೂಲಕ ಸಿಗುವುದು: ನಿಮ್ಮದೇ ಟೂಲ್‌ಬಾರ್‌ಗಾಗಿ ಪುಟ ಬದಲಾವಣೆ.
`previous, next, goToday`ಮೆಥಡ್	`() => void`		ನಿಮ್ಮದೇ ಟೂಲ್‌ಬಾರ್‌ಗಾಗಿ: ಹಿಂದಿನ ಅಥವಾ ಮುಂದಿನ ಪುಟವನ್ನು, ಅಥವಾ ಇಂದಿನ ದಿನವನ್ನು ತೋರಿಸುತ್ತವೆ.
`title`ಪ್ರಾಪರ್ಟಿ	`string`		ತೋರಿಸುತ್ತಿರುವುದು, ಟೂಲ್‌ಬಾರ್‌ನ ಶೀರ್ಷಿಕೆ ಹೇಳುವಂತೆಯೇ.

ಸ್ಥಿತಿ React ನ ಸ್ವಂತ ಇನ್‌ಪುಟ್‌ಗಳಂತೆಯೇ ಕೆಲಸ ಮಾಡುತ್ತದೆ: ಒಂದು ಮೌಲ್ಯವನ್ನು ನೀಡಿ ಅದರ on…Change ಕಾಲ್‌ಬ್ಯಾಕ್‌ನಿಂದ ಅದನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿ, ಅಥವಾ default… ಮೌಲ್ಯವನ್ನು ನೀಡಿ ಕಾಂಪೊನೆಂಟ್ ತಾನೇ ಅದನ್ನು ಇಟ್ಟುಕೊಳ್ಳಲು ಬಿಡಿ.

ನೀವು ಹೊಂದಿಸದೆ ಬಿಟ್ಟ ಕಸ್ಟಮೈಸೇಶನ್ ಪ್ರಾಪ್‌ಗಳು ಅತ್ಯಂತ ಸಮೀಪದ 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`		ಶೆಡ್ಯೂಲರ್ ತಿಳಿಸುವ ಪುನರಾವೃತ್ತಿಯಲ್ಲಿ: ಅದರ ನಿಯಮ ಅದಕ್ಕೆ ನೀಡಿದ ಆರಂಭ.
`editable`ಪ್ರಾಪರ್ಟಿ	`boolean`		ಶೆಡ್ಯೂಲರ್ ಏನೇ ಹೇಳಲಿ, ಅದನ್ನು ಸರಿಸಬಹುದೇ ಎಂಬುದು.
`data`ಪ್ರಾಪರ್ಟಿ	`T`		ಅದರೊಂದಿಗೆ ಇಡಬೇಕಾದ ಬೇರೆ ಏನಾದರೂ.

NuiSchedulerResource

ಈವೆಂಟ್‌ಗಳು ಸೇರಿರುವ ಒಂದು ಕೊಠಡಿ, ವ್ಯಕ್ತಿ ಅಥವಾ ಯಂತ್ರ.

NuiSchedulerResource: ಪ್ರಾಪರ್ಟಿಗಳು
ಹೆಸರು	ಪ್ರಕಾರ	ವಿವರಣೆ
`id, title`ಪ್ರಾಪರ್ಟಿ	`string`	ಅದರ ಕೀ, ಮತ್ತು ಅದು ತೋರಿಸುವ ಹೆಸರು.
`tone, color`ಪ್ರಾಪರ್ಟಿ	`NuiSchedulerTone, string`	ಅದರ ಈವೆಂಟ್‌ಗಳ ಬಣ್ಣಗಳು, ಅವುಗಳಿಗೆ ತಮ್ಮದೇ ಬಣ್ಣ ಇಲ್ಲದಿದ್ದರೆ.
`businessHours`ಪ್ರಾಪರ್ಟಿ	`NuiSchedulerHours[]`	ಶೆಡ್ಯೂಲರ್‌ನ ಕೆಲಸದ ಸಮಯದ ಬದಲು, ಅದು ಲಭ್ಯವಿರುವ ಸಮಯ.
`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 ಫೈಲ್‌ನ ಈವೆಂಟ್‌ಗಳನ್ನು ಓದುತ್ತದೆ, ಅವುಗಳ ಸಮಯಗಳನ್ನು ಒಂದೇ ಸಮಯ ವಲಯದಲ್ಲಿ ನೀಡುತ್ತದೆ.