Scheduler का React 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 फ़ाइल के इवेंट पढ़ता है, उनके समय एक ही टाइम ज़ोन में।