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`	தலைப்பின் heading நிலை; நிகழ்ச்சி நிரலின் நாட்கள் ஒரு நிலை கீழே.
`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 வண்ணமும், அதை வடிவமைக்கும் class-களும்.
`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 கோப்பின் நிகழ்வுகளைப் படிக்கிறது; அவற்றின் நேரங்கள் ஒரே நேர மண்டலத்தில் இருக்கும்.