Calendar

日付を視覚的に表示するカレンダーコンポーネント。月表示・週表示に対応し、イベント表示やスケジュール管理に使用します。

Basic

jui-calendar の最も基本的な使用例です。

関連コンポーネント

  • Date Picker — カレンダーUIを使って日付を選択するフォームコンポーネント

アクセシビリティ

  • WAI-ARIA:
    • 日付グリッドに role="grid" を設定。
    • 各日付セルに role="gridcell" を設定。
    • 選択された日付に aria-selected="true" を設定。
    • 今日の日付に aria-current="date" を設定。
    • 前月・次月ナビゲーションボタンに aria-label を設定。
    • 月/年の表示切替ボタンに適切なラベルを設定。
  • キーボードナビゲーション:
    • ArrowLeft: 前日に移動
    • ArrowRight: 翌日に移動
    • ArrowUp: 前週（同曜日）に移動
    • ArrowDown: 翌週（同曜日）に移動
    • Enter / Space: フォーカス中の日付を選択
    • Home: 週の先頭に移動
    • End: 週の末尾に移動

CSS カスタムプロパティ

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークンを参照してスタイルが適用されます。

ブラウザ対応

機能用途ChromeFirefoxSafariステータス
:focus-visibleキーボードフォーカスリング86+85+15.4+Baseline 2022
::slotted()Shadow DOM スロットスタイル53+63+10+Baseline
CSS Custom Propertiesデザイントークン49+31+9.1+Baseline
Intl.DateTimeFormatロケール対応の曜日名・月名表示✅✅✅Widely Available

Baseline 情報

機能Baseline 達成Widely Available
:focus-visible2022年2024年後半 ✅
CSS Custom PropertiesBaselineWidely Available ✅
Intl.DateTimeFormatBaselineWidely Available ✅

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

PropertyAttributeDescriptionTypeDefault
eventseventsカレンダーイベント（JSON文字列またはオブジェクト配列）CalendarEvent[] | string'[]'
fullscreenfullscreenフルスクリーン表示（true: 大きいセル + イベントテキスト表示）booleantrue
localelocaleロケール（曜日名・月名の表示に使用）string'ja'
maxmax最大日付（ISO 8601 形式）string''
minmin最小日付（ISO 8601 形式）string''
modemode表示モード: month（月表示）/ year（年表示）"month" | "year"'month'
monthButtonLabelmonth-button-label月表示ボタンのラベルstring'月'
nextMonthLabelnext-month-label次月ボタンのaria-labelstring'Next month'
prevMonthLabelprev-month-label前月ボタンのaria-labelstring'Previous month'
todayLabeltoday-label今日ボタンのラベルstring'Today'
valuevalue選択日（ISO 8601 形式: YYYY-MM-DD）string''
yearButtonLabelyear-button-label年表示ボタンのラベルstring'年'

イベント

コンポーネントから発火するカスタムイベントの一覧です。

EventDescriptionType
juiChange日付選択時に発火CustomEvent<{ value: string; date: Date; }>
juiPanelChangeパネル変更時（モードまたは表示月の変更）に発火CustomEvent<{ mode: string; date: Date; }>

Built with StencilJS