Vuetify

ショップ

企業向け

v-calendarコンポーネントは、日・週・月のビューで情報を表示するために使用されます。日次ビューには、終日または時間指定要素のスロットがあり、週次ビューおよび月次ビューには、各日のスロットがあります。必要に応じて、イベントの配列を渡すことができ、それらは適切な曜日と時間にわたってレンダリングされます。

カレンダーには、どのタイプのカレンダーがどの期間にわたって表示されるかを決定するタイプと値があります。これは、最低限の設定、 namestartおよび endプロパティを持つイベントの配列を示しています。 endはオプションで、デフォルトはstartです。 startに時間が設定されている場合は、時間指定イベントと見なされ、日表示されます。イベントは複数日にまたがることができ、それに応じてレンダリングされます。

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

これは、タイプがweekの終日イベントおよび時間指定イベントを含むイベントカレンダーの例です。

これは、各 interval slotスロットにコンテンツが含まれ、タイプがdayのカレンダーの例です。

Slotを使用すると、各日のコンテンツ、日単位のビューの時間間隔、およびさまざまなラベルを定義できます。

これは、カレンダーの表示を制御する追加のイベントハンドラと外部コンポーネントを備えたプランナーの例です。

This is an example of an event calendar with a type of category that allows you to compare two schedules side-by-side.

This is an example of an calendar with a line for the current time.

This is an example of an event calendar where you can drag events, extend their length, and create events.

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!