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 ఫైల్‌లోని ఈవెంట్‌లను చదువుతుంది, వాటి సమయాలను ఒకే టైమ్ జోన్‌లో ఇస్తుంది.