Sparkle Design

Calendar

カレンダーはポップアップウィンドウでユーザーに日付を選択してもらうために使用するコンポーネントです。

Figma
Calendar の概要図

Anatomy: 解剖図

Calendarの構成要素を示す解剖図。1はCalendar全体を囲むContainerを、2は年月表示と前後移動ボタンを含むHeaderを、3は日付グリッドを表示するBodyを、4はHeaderを構成するIcon Buttonを、5はBodyを構成する日付選択用のButtonを示します
ItemNameDescriptionComponentOptional
1Containerコンテナ要素—
2Headerヘッダー要素—
3Bodyボディー要素—
4Icon Buttonヘッダーを構成するアイコンボタン要素Icon Button—
5Buttonボデーを構成するボタン要素Button—

Options: 選択肢

View

date(Default)

日付を選択するためのビューです。

ポップアップウィンドウを展開した初期状態のレイアウトです。

dateビューのCalendar。

month

月を選択するためのビューです。

monthビューのCalendar。

year

年を選択するためのビューです。

yearビューのCalendar。

Behaviors: 振る舞い

配置の自動調整

カレンダーはトリガー直下の左位置にポップアップ形式で表示されます。カレンダーが表示領域からはみ出す場合はカレンダーが見切れない位置にレイアウトされます。

Calendarの配置を示す図。「2024/2/1」と表示されたトリガーの直下にCalendarがポップアップ形式で表示されます。

レイアウト

カレンダーはトリガーと4pxの隙間を空けて配置されます。

Calendarのレイアウト間隔を示す図。

ビューの切り替え

カレンダーに年と月を選択すると、操作に応じてビューが自動的に切り替わります。

カレンダー以外の領域またはトリガーをクリックすると、カレンダーが閉じられます。

ビュー切り替えを示す図。

当日の設定

当日に該当する日付はisCurrentの状態で表示されます。
月と年を選択するビューでは、当日の日付に該当する月と年がisCurrentになります。

当日の設定を示すmonthビューのCalendar。2025年の12ヶ月が表示され、当日の日付に該当する2月が青い背景のisCurrent状態で表示されています。

モバイルブラウザ

モバイルブラウザでの日付選択時は、カレンダーコンポーネントの代わりにブラウザが提供しているデートピッカーが表示されます。

モバイルブラウザでの日付選択画面。Calendarコンポーネントの代わりにブラウザが提供しているデートピッカーが表示されます。

Metrics: 寸法

date

  • Vertical Resizing: Hug
  • Horizontal Resizing: Hug
  • Container Height: Hug
  • Item Spacing: 8px
  • padding Vertical: 12px
  • padding Horizontal: 12px
dateビューの寸法仕様を示す図。

month

  • Vertical Resizing: Hug
  • Horizontal Resizing: Hug
  • Container Height: Hug
  • Item Spacing: 8px
  • padding Vertical: 12px
  • padding Horizontal: 12px
monthビューの寸法仕様を示す図。

year

  • Vertical Resizing: Hug
  • Horizontal Resizing: Hug
  • Container Height: Hug
  • Item Spacing: 8px
  • padding Vertical: 12px
  • padding Horizontal: 12px
yearビューの寸法仕様を示す図。

Related Components: 関連コンポーネント

Input Date

Change log: 変更履歴

DateChanges
2025/07/04ドキュメントを公開
小さな気づきや違和感があれば、お気軽に教えてください。
フィードバック
Chat illustration
前へ次へ