Needless UI

コンポーネント

スケジューラー

予定を月、週、日、予定リストで表示し、ドラッグで配置できます。

インポート

import-scheduler.ts
import { NuiScheduler, type NuiSchedulerEvent } from '@needless-ui/angular/scheduler';

NuiScheduler

予定を月、週、日、予定リストで表示するスケジューラー。

セレクター
nui-scheduler
名前型デフォルト説明
events入力NuiSchedulerEvent<T>[][]表示する予定。
view双方向'month' | 'week' | 'day' | 'agenda''week'表示中のビュー。
views入力NuiSchedulerView[]all fourユーザーが切り替えられるビュー。
date双方向NuiDatetoday表示する日。キーボードのフォーカスがある日でもあります。
slotMinutes入力number30タイムグリッドの1行あたりの分数。予定を動かす単位にもなります。
scrollHour入力number8タイムグリッドを開いたときに最初に表示する時刻。
agendaDays入力number30予定リストに表示する今後の日数。
editable入力booleanfalseポインターとキーボードで予定を移動、リサイズできるようにします。
selectable入力booleanfalseグリッド上で時間を選べるようにします。予定の作成に使います。
firstDay入力1 … 7週の最初の曜日。1 は月曜日です。デフォルトはロケールに従います。
headingLevel入力number2タイトルの見出しレベル。予定リストの日の見出しは、その1つ下になります。
locale入力stringLOCALE_ID日付と時刻の書式設定に使うロケール。
labels入力Partial<NuiSchedulerLabels>スケジューラーが表示または読み上げるすべてのテキスト。翻訳に使います。
corners入力NuiCorners角の形：round、squircle、bevel、scoop、notch、square のいずれか。
radius入力NuiRadius角の大きさ：none、small、medium、large、full のいずれか。
density入力NuiDensity占めるスペースの広さ：compact、regular、roomy のいずれか。
eventClick出力NuiSchedulerEvent<T>クリックされた予定、または Enter キーで開かれた予定を出力します。
eventChange出力{ event, start, end }移動またはリサイズの後に、予定の新しい時刻を出力します。
slotSelect出力{ start, end, allDay }グリッド上で選ばれた時間を出力します。
rangeChange出力{ start, end }表示される最初の日と最後の日が変わったときに、それらを出力します。

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

NuiSchedulerEvent

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

名前型デフォルト説明
id, titleプロパティstringキーと、表示する内容。
start, endプロパティNuiDateTime | NuiDate日付と時刻。終日の予定では日付のみです。
allDayプロパティbooleanデフォルトでは、start に時刻がないかどうかで決まります。
toneプロパティ'accent' | 'neutral' | 'success' | 'warning' | 'danger''accent'予定の色。
editableプロパティbooleanスケジューラーの設定にかかわらず、この予定を移動できるかどうか。
dataプロパティTそのほか、予定と一緒に保持するデータ。

NuiSchedulerEventTemplate

予定を描画します。コンテキストには、予定とテキスト形式の時刻が入っています。

セレクター
ng-template[nuiSchedulerEvent]