Needless UI

コンポーネント

スケジューラー

予定を月、週、日、予定リスト、または会議室や人のタイムラインで表示し、ドラッグで配置できます。

インポート

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'タイムラインに表示する範囲。1日を時間枠ごとに、または1週間か1か月を日ごとに表示します。
date
defaultDate
onDateChange状態		NuiDatetoday表示する日。キーボードのフォーカスがある日でもあります。サーバーでスケジューラーをレンダリングする場合は defaultDate を渡してください。サーバーの「今日」がユーザーの今日と同じとは限りません。
slotMinutesプロップnumber30タイムグリッドの1行、または1日のタイムラインの1列あたりの分数。
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タイトルの見出しレベル。予定リストの日の見出しは、その1つ下になります。
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… の値を渡してコンポーネントに保持させます。

カスタマイズ用の props のうち、設定しなかったものは最も近い data-nui-* 属性に従います。詳しくはカスタマイズガイドをご覧ください。

NuiSchedulerToolbar

toolbar 関数が受け取るもの。独自のツールバーの描画に使います。

名前型デフォルト説明
titleプロパティstring表示中の期間を、ツールバーのタイトルと同じ表現で表したもの。
view, viewsプロパティNuiSchedulerView, NuiSchedulerView[]表示中のビューと、切り替えられるビュー。
setView, previous, next, goTodayメソッド(view?) => voidビューを切り替えるか、前または次のページ、あるいは今日を表示します。

NuiSchedulerEvent

1件の予定。時刻付きの予定では終了時刻を含まず、終日の予定では終了日が最終日になります。

名前型デフォルト説明
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プロパティstringFREQ=WEEKLY;BYDAY=MO のような、RFC 5545 の繰り返しルール。
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 ファイルの予定を読み込みます。時刻は1つのタイムゾーンにそろえます。