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 ફાઇલની ઇવેન્ટ વાંચે છે, અને તેમના સમય એક જ ટાઇમ ઝોનમાં આપે છે.