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 ফাইলের ইভেন্ট পড়ে, সেগুলোর সময় একটিই টাইম জোনে।