# 画面設計書 13-Calendar

## 概要

本ドキュメントは、ControlCatalogアプリケーションにおけるCalendarページ（Calendarコントロールのデモページ）の画面設計を記述したものである。

### 本画面の処理概要

CalendarページはAvaloniaフレームワークのCalendarコントロールの機能をデモンストレーションするための画面である。日付選択、範囲選択、選択モードの違い、表示期間の制限、選択不可日の設定など、カレンダーコントロールの多様な機能を視覚的に確認できる。

**業務上の目的・背景**：日付入力が必要なアプリケーション（予約システム、スケジュール管理、期間指定検索など）を開発する開発者に対して、Calendarコントロールの各種設定オプションと動作を示す。特に選択モードの違いや選択不可日の設定は、業務要件に応じたカレンダーUIの実装に重要な情報である。

**画面へのアクセス方法**：MainWindow起動後、左側のHamburgerMenuから「Calendar」を選択してアクセスする。

**主要な操作・処理内容**：
1. 各選択モード（None、SingleDate、SingleRange、MultipleRange）のカレンダー操作
2. 無効状態カレンダーの表示確認
3. タップによる範囲選択（AllowTapRangeSelection）の動作確認
4. 表示期間制限（DisplayDateStart/End）の動作確認
5. 選択不可日（BlackoutDates）の表示と選択制限確認

**画面遷移**：MainViewのHamburgerMenuから遷移してくる。本画面から他画面への直接遷移はない。

**権限による表示制御**：本画面はデモ用途であり、権限による表示制御は実装されていない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 24 | Calendar | 主機能 | Calendarコントロールのデモ。日付選択と月・年ナビゲーション |

## 画面種別

デモ・サンプル画面（Calendarコントロールの機能展示）

## URL/ルーティング

ControlCatalogアプリケーション内のHamburgerMenuによるナビゲーション。URIベースのルーティングは使用していない。

## 入出力項目

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|----------|------|------|
| SelectedDate | 出力 | DateTime? | - | 選択された日付（SingleDateモード時） |
| SelectedDates | 出力 | SelectedDatesCollection | - | 選択された日付群（Range系モード時） |
| DisplayDateStart | 設定 | DateTime | - | 表示可能な最初の日付 |
| DisplayDateEnd | 設定 | DateTime | - | 表示可能な最後の日付 |
| BlackoutDates | 設定 | CalendarBlackoutDatesCollection | - | 選択不可日のコレクション |

## 表示項目

| セクション | コントロール | 説明 |
|------------|--------------|------|
| ヘッダー | TextBlock | コントロールの説明文 |
| SelectionMode: None | Calendar | 日付選択不可のカレンダー |
| SelectionMode: SingleDate | Calendar | 単一日付選択モードのカレンダー |
| Disabled | Calendar | 無効状態（IsEnabled=False）のカレンダー |
| SelectionMode: SingleRange | Calendar | 単一範囲選択モードのカレンダー |
| SelectionMode: MultipleRange | Calendar | 複数範囲選択モードのカレンダー |
| Tap Range Selection | Calendar | AllowTapRangeSelection=Trueのカレンダー |
| DisplayDates | Calendar | DisplayDateStart/Endで表示期間を制限したカレンダー |
| BlackoutDates | Calendar | 選択不可日が設定されたカレンダー |

## イベント仕様

### 1-初期化処理（コンストラクタ）

ページのコンストラクタで、DisplayDatesCalendarとBlackoutDatesCalendarの初期設定を行う。

**処理フロー**:
1. InitializeComponent()でXAML要素を初期化
2. 現在日付（today）を取得
3. DisplayDatesCalendarに表示期間を設定（today±25日）
4. BlackoutDatesCalendarに選択不可日を設定（過去日+6日後）

**関連コード** (CalendarPage.xaml.cs:8-18):
```csharp
public CalendarPage()
{
    InitializeComponent();

    var today = DateTime.Today;
    DisplayDatesCalendar.DisplayDateStart = today.AddDays(-25);
    DisplayDatesCalendar.DisplayDateEnd = today.AddDays(25);

    BlackoutDatesCalendar.BlackoutDates.AddDatesInPast();
    BlackoutDatesCalendar.BlackoutDates.Add(new CalendarDateRange(today.AddDays(6)));
}
```

### 2-SelectionMode変更時の動作

各カレンダーのSelectionModeプロパティに応じて選択動作が変化する。

**SelectionModeの種類**:
- **None**: 日付の選択ができない
- **SingleDate**: 単一の日付のみ選択可能
- **SingleRange**: 連続した日付範囲を1つ選択可能
- **MultipleRange**: 複数の連続した日付範囲を選択可能

### 3-タップ範囲選択（AllowTapRangeSelection）

AllowTapRangeSelection=Trueが設定されたカレンダーでは、2回のタップで範囲選択ができる。

**処理フロー**:
1. 1回目のタップ：開始日を選択
2. 2回目のタップ：終了日を選択し、範囲が確定

## データベース更新仕様

本画面はUIデモ用途であり、データベース操作は行わない。

## メッセージ仕様

本画面では特定のメッセージ表示は実装されていない。

## 例外処理

- BlackoutDatesに設定された日付は選択不可となり、クリックしても選択されない
- DisplayDateStart/End範囲外の日付は表示されない

## 備考

- BlackoutDatesCalendarでは過去日すべてと6日後の日付が選択不可に設定される
- DisplayDatesCalendarでは現在日付の前後25日間のみが表示される
- WrapPanelを使用して8つのカレンダーを折り返し配置している

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | CalendarPage.xaml.cs | `samples/ControlCatalog/Pages/CalendarPage.xaml.cs` | BlackoutDates、DisplayDateの設定 |

**読解のコツ**: コードビハインドでは2つのカレンダーに対して初期設定を行っている。AddDatesInPast()は過去日すべてを選択不可にする便利メソッド。

#### Step 2: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | CalendarPage.xaml | `samples/ControlCatalog/Pages/CalendarPage.xaml` | 8種類のカレンダーの配置とプロパティ |

**主要処理フロー**:
1. **行1-3**: UserControl定義
2. **行4-5**: 説明テキスト（h2クラス）
3. **行7-14**: WrapPanelとスタイル定義（各カレンダーにMargin=8を適用）
4. **行15-49**: 8種類のCalendarコントロールの配置

#### Step 3: 各カレンダーの設定を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | CalendarPage.xaml | `samples/ControlCatalog/Pages/CalendarPage.xaml` | SelectionModeの違い |

**カレンダー設定一覧**:
- **行17**: SelectionMode="None"
- **行21**: SelectionMode="SingleDate"
- **行25**: IsEnabled="False"
- **行29**: SelectionMode="SingleRange"
- **行33**: SelectionMode="MultipleRange"
- **行37-38**: SelectionMode="SingleRange", AllowTapRangeSelection="True"
- **行42-43**: Name="DisplayDatesCalendar"（コードビハインドで設定）
- **行47-48**: Name="BlackoutDatesCalendar"（コードビハインドで設定）

### プログラム呼び出し階層図

```
CalendarPage
    │
    ├─ InitializeComponent()
    │      └─ XAML解析・コントロール初期化
    │
    └─ コンストラクタ内初期化
           ├─ DisplayDatesCalendar設定
           │      ├─ DisplayDateStart = today - 25日
           │      └─ DisplayDateEnd = today + 25日
           │
           └─ BlackoutDatesCalendar設定
                  ├─ AddDatesInPast()
                  └─ Add(today + 6日)
```

### データフロー図

```
[初期化]                        [処理]                         [出力]

DateTime.Today ───▶ AddDays(-25) ───▶ DisplayDateStart
               ───▶ AddDays(+25) ───▶ DisplayDateEnd

DateTime.Today ───▶ AddDatesInPast() ───▶ BlackoutDates
               ───▶ AddDays(+6) ───▶ BlackoutDates.Add()
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| CalendarPage.xaml | `samples/ControlCatalog/Pages/CalendarPage.xaml` | XAML | 画面レイアウト・8種類のカレンダー定義 |
| CalendarPage.xaml.cs | `samples/ControlCatalog/Pages/CalendarPage.xaml.cs` | ソース | コードビハインド・初期設定処理 |
| MainView.xaml | `samples/ControlCatalog/MainView.xaml` | XAML | ナビゲーション元のメインビュー |
