Needless UI

ਕੰਪੋਨੈਂਟ

Scheduler

ਮਹੀਨੇ, ਹਫ਼ਤੇ, ਦਿਨ, ਏਜੰਡੇ ਜਾਂ ਕਮਰਿਆਂ ਅਤੇ ਲੋਕਾਂ ਦੀ ਟਾਈਮਲਾਈਨ ਵਿੱਚ ਇਵੈਂਟ, ਡ੍ਰੈਗ ਕਰਕੇ ਸਹੀ ਥਾਂ ’ਤੇ।

ਇੰਪੋਰਟ

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

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ਸਥਿਤੀ		NuiDatetodayਦਿਖਾਇਆ ਗਿਆ ਦਿਨ, ਅਤੇ ਜਿੱਥੇ ਕੀ-ਬੋਰਡ ਫ਼ੋਕਸ ਹੈ। ਜਦੋਂ ਸਰਵਰ ਸ਼ਡਿਊਲਰ ਨੂੰ ਰੈਂਡਰ ਕਰੇ, ਤਾਂ defaultDate ਦਿਓ: ਜ਼ਰੂਰੀ ਨਹੀਂ ਕਿ ਸਰਵਰ ਦਾ ਅੱਜ ਵਰਤੋਂਕਾਰ ਦਾ ਵੀ ਅੱਜ ਹੋਵੇ।
slotMinutesਪ੍ਰਾਪnumber30ਸਮਾਂ ਗ੍ਰਿਡ ਦੀ ਹਰ ਕਤਾਰ ਦੇ ਮਿੰਟ, ਜਾਂ ਇੱਕ ਦਿਨ ਦੀ ਟਾਈਮਲਾਈਨ ਦੇ ਹਰ ਕਾਲਮ ਦੇ।
snapMinutesਪ੍ਰਾਪnumberslotMinutesਉਹ ਸਟੈੱਪ, ਜਿਸ ਨਾਲ ਇਵੈਂਟ ਹਿੱਲਦੇ ਅਤੇ ਰੀਸਾਈਜ਼ ਹੁੰਦੇ ਹਨ।
dayStart, dayEndਪ੍ਰਾਪnumber0, 24ਸਮਾਂ ਗ੍ਰਿਡ ਕਿਸ ਘੰਟੇ ਤੋਂ ਕਿਸ ਘੰਟੇ ਤੱਕ ਦਿਖਾਉਂਦਾ ਹੈ।
scrollHourਪ੍ਰਾਪnumber8ਉਹ ਘੰਟਾ, ਜਿਸ ’ਤੇ ਸਮਾਂ ਗ੍ਰਿਡ ਖੁੱਲ੍ਹਦਾ ਹੈ।
agendaDaysਪ੍ਰਾਪnumber30ਏਜੰਡਾ ਕਿੰਨੇ ਦਿਨ ਅੱਗੇ ਤੱਕ ਦਿਖਾਉਂਦਾ ਹੈ।
businessHoursਪ੍ਰਾਪNuiSchedulerHours[]ਕੰਮ ਦੇ ਘੰਟੇ, ਜਿਵੇਂ { days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }। ਬਾਕੀ ਸਮੇਂ ’ਤੇ ਛਾਂ ਹੁੰਦੀ ਹੈ।
weekendsਪ੍ਰਾਪbooleantrueਵੀਕਐਂਡ ਦਿਖਾਉਂਦਾ ਹੈ। ਇਸ ਤੋਂ ਬਿਨਾਂ ਹਰ ਵਿਊ ਲੋਕੇਲ ਦਾ ਵੀਕਐਂਡ ਛੱਡ ਦਿੰਦਾ ਹੈ।
weekNumbersਪ੍ਰਾਪbooleanfalseਮਹੀਨੇ ਵਿੱਚ, ਅਤੇ ਸਮਿਆਂ ਦੇ ਉੱਪਰ, ISO ਹਫ਼ਤਾ ਨੰਬਰ ਦਿਖਾਉਂਦਾ ਹੈ।
editableਪ੍ਰਾਪbooleanfalseਇਵੈਂਟ ਪੁਆਇੰਟਰ ਅਤੇ ਕੀ-ਬੋਰਡ ਨਾਲ ਹਿਲਾਏ ਅਤੇ ਰੀਸਾਈਜ਼ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ।
selectableਪ੍ਰਾਪbooleanfalseਇਵੈਂਟ ਬਣਾਉਣ ਲਈ ਗ੍ਰਿਡ ’ਤੇ ਸਮਾਂ ਚੁਣਿਆ ਜਾ ਸਕਦਾ ਹੈ।
allowਪ੍ਰਾਪ(time) => booleanਤੈਅ ਕਰਦਾ ਹੈ ਕਿ ਹਿਲਾਉਣਾ, ਰੀਸਾਈਜ਼ ਜਾਂ ਸਮੇਂ ਦੀ ਚੋਣ ਹੋ ਸਕਦੀ ਹੈ ਜਾਂ ਨਹੀਂ।
toolbarਪ੍ਰਾਪboolean | ((toolbar: NuiSchedulerToolbar) => ReactNode)trueਟੂਲਬਾਰ ਦਿਖਾਉਂਦਾ ਹੈ, ਜਾਂ ਜੋ ਮਿਲਦਾ ਹੈ ਉਸ ਤੋਂ ਤੁਹਾਡਾ ਆਪਣਾ ਟੂਲਬਾਰ ਬਣਾਉਂਦਾ ਹੈ।
firstDayਪ੍ਰਾਪ1 … 7ਹਫ਼ਤੇ ਦਾ ਪਹਿਲਾ ਦਿਨ, ਸੋਮਵਾਰ ਲਈ 1। ਡਿਫ਼ਾਲਟ ਰੂਪ ਵਿੱਚ ਲੋਕੇਲ ਵਾਲਾ।
headingLevelਪ੍ਰਾਪnumber2ਸਿਰਲੇਖ ਦਾ ਹੈਡਿੰਗ ਲੈਵਲ; ਏਜੰਡੇ ਦੇ ਦਿਨ ਇੱਕ ਲੈਵਲ ਹੋਰ ਡੂੰਘੇ।
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 ਫ਼ੰਕਸ਼ਨ ਨੂੰ ਜੋ ਮਿਲਦਾ ਹੈ, ਤੁਹਾਡਾ ਆਪਣਾ ਟੂਲਬਾਰ ਬਣਾਉਣ ਲਈ।

ਨਾਮਟਾਈਪਡਿਫ਼ਾਲਟਵੇਰਵਾ
titleਪ੍ਰਾਪਰਟੀstringਜੋ ਦਿਖਾਇਆ ਜਾ ਰਿਹਾ ਹੈ, ਟੂਲਬਾਰ ਦੇ ਸਿਰਲੇਖ ਦੇ ਸ਼ਬਦਾਂ ਵਿੱਚ।
view, viewsਪ੍ਰਾਪਰਟੀNuiSchedulerView, NuiSchedulerView[]ਦਿਖਾਇਆ ਗਿਆ ਵਿਊ, ਅਤੇ ਉਪਲਬਧ ਵਿਊ।
setView, previous, next, goTodayਮੈਥਡ(view?) => voidਵਿਊ ਬਦਲਦੇ ਹਨ, ਪਿਛਲਾ ਜਾਂ ਅਗਲਾ ਪੰਨਾ ਦਿਖਾਉਂਦੇ ਹਨ, ਜਾਂ ਅੱਜ ਦਾ ਦਿਨ ਦਿਖਾਉਂਦੇ ਹਨ।

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ਪ੍ਰਾਪਰਟੀstringRFC 5545 ਦਾ ਦੁਹਰਾਉਣ ਦਾ ਨਿਯਮ, ਜਿਵੇਂ FREQ=WEEKLY;BYDAY=MO।
exdateਪ੍ਰਾਪਰਟੀstring[]ਜੋ ਦੁਹਰਾਅ ਨਹੀਂ ਹੁੰਦੇ, ਉਨ੍ਹਾਂ ਦੇ ਸ਼ੁਰੂਆਤੀ ਸਮੇਂ।
recurrenceIdਪ੍ਰਾਪਰਟੀNuiDateTime | NuiDateਸ਼ਡਿਊਲਰ ਦੇ ਦੱਸੇ ਕਿਸੇ ਦੁਹਰਾਅ ’ਤੇ: ਉਹ ਸ਼ੁਰੂਆਤੀ ਸਮਾਂ, ਜੋ ਉਸ ਨੂੰ ਉਸ ਦੇ ਨਿਯਮ ਨੇ ਦਿੱਤਾ।
editableਪ੍ਰਾਪਰਟੀbooleanਕੀ ਇਸ ਨੂੰ ਹਿਲਾਇਆ ਜਾ ਸਕਦਾ ਹੈ, ਸ਼ਡਿਊਲਰ ਭਾਵੇਂ ਕੁਝ ਵੀ ਕਹੇ।
dataਪ੍ਰਾਪਰਟੀTਇਸ ਨਾਲ ਰੱਖਣ ਲਈ ਕੁਝ ਹੋਰ।

NuiSchedulerResource

ਕੋਈ ਕਮਰਾ, ਵਿਅਕਤੀ ਜਾਂ ਮਸ਼ੀਨ, ਜਿਸ ਨਾਲ ਇਵੈਂਟ ਜੁੜੇ ਹੁੰਦੇ ਹਨ।

ਨਾਮਟਾਈਪਡਿਫ਼ਾਲਟਵੇਰਵਾ
id, titleਪ੍ਰਾਪਰਟੀstringਇਸ ਦੀ ਕੁੰਜੀ, ਅਤੇ ਉਹ ਨਾਮ ਜੋ ਇਹ ਦਿਖਾਉਂਦਾ ਹੈ।
tone, colorਪ੍ਰਾਪਰਟੀNuiSchedulerTone, stringਇਸ ਦੇ ਇਵੈਂਟਾਂ ਦੇ ਰੰਗ, ਜਦੋਂ ਤੱਕ ਉਨ੍ਹਾਂ ਦੇ ਆਪਣੇ ਰੰਗ ਨਾ ਹੋਣ।
businessHoursਪ੍ਰਾਪਰਟੀNuiSchedulerHours[]ਇਹ ਕਦੋਂ ਉਪਲਬਧ ਹੈ, ਸ਼ਡਿਊਲਰ ਦੇ ਕੰਮ ਦੇ ਘੰਟਿਆਂ ਦੀ ਥਾਂ।
dataਪ੍ਰਾਪਰਟੀRਇਸ ਨਾਲ ਰੱਖਣ ਲਈ ਕੁਝ ਹੋਰ।

Helpers

ਦੁਹਰਾਏ ਜਾਣ ਵਾਲੇ ਇਵੈਂਟਾਂ ਅਤੇ iCalendar ਫ਼ਾਈਲਾਂ ਲਈ ਫ਼ੰਕਸ਼ਨ।

ਨਾਮਟਾਈਪਡਿਫ਼ਾਲਟਵੇਰਵਾ
nuiSchedulerOccurrencesਮੈਥਡ(event, first, last) => NuiSchedulerEvent[]ਦਿੱਤੇ ਦਿਨਾਂ ਵਿੱਚ ਇਵੈਂਟ ਜਿਵੇਂ ਦਿਸਦਾ ਹੈ: ਦੁਹਰਾਏ ਜਾਣ ਵਾਲੇ ਇਵੈਂਟ ਦਾ ਹਰ ਦੁਹਰਾਅ।
nuiSchedulerRuleਮੈਥਡ(text: string) => NuiSchedulerRule | nullਦੁਹਰਾਉਣ ਦਾ ਨਿਯਮ ਪੜ੍ਹਦਾ ਹੈ, ਜਾਂ null ਵਾਪਸ ਕਰਦਾ ਹੈ।
nuiSchedulerToIcsਮੈਥਡ(events, options?) => stringਇਵੈਂਟਾਂ ਨੂੰ iCalendar ਫ਼ਾਈਲ ਵਜੋਂ ਲਿਖਦਾ ਹੈ।
nuiSchedulerFromIcsਮੈਥਡ(text, { timeZone? }) => NuiSchedulerEvent[]iCalendar ਫ਼ਾਈਲ ਦੇ ਇਵੈਂਟ ਪੜ੍ਹਦਾ ਹੈ, ਉਨ੍ਹਾਂ ਦੇ ਸਮੇਂ ਇੱਕੋ ਟਾਈਮ ਜ਼ੋਨ ਵਿੱਚ।