syncfusion-wpf-calendar

WPF カレンダー（CalendarEdit）実装ガイド

CalendarEdit コントロールは、WPF アプリケーションで日付を選択、管理するための包括的なカレンダー UI を提供します。単一または複数の日付選択、日付範囲の制限、外観のカスタマイズに加え、日表示から 10 年表示までの強力なナビゲーションモードに対応しています。

このスキルを使用する場面

• 日付選択： ユーザーが単一または複数の日付を選択できるようにする場合
• カレンダー UI： 月や年を切り替えられるカレンダーコントロールを構築する場合
• 日付の制限： 日付範囲の制約を実装したり、特定の日付を選択不可にしたりする場合
• スケジュール管理： 予約、予定、イベントを選択するインターフェイスを作成する場合
• 日付操作： 日付計算（指定した日数や月数の加算など）にカレンダーのメソッドを使用する場合
• 外観のカスタマイズ： カレンダーの色、ブラシ、視覚プロパティをスタイル設定する場合
• 多言語サポート： RTL（右から左）レイアウトや異なるカルチャに対応する場合

コンポーネントの概要

主な機能：

• 0 年から 9999 年までの日付に対応
• 単一および複数の日付選択モード
• 日、月、年、10 年単位のナビゲーション表示
• 最小／最大日付の制約と選択不可日付の設定
• 色、ブラシ、アニメーションをカスタマイズ可能
• RTL とカルチャに対応
• スムーズな切り替えを実現する組み込みアニメーション

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールとアセンブリの設定
• デザイナー、XAML、C# を使用した CalendarEdit の追加
• 基本的なコントロール構造と初期設定

日付選択

📄 参照： references/date-selection.md

• 単一の日付を選択する（マウスクリックとプログラムによる選択）
• 複数の日付を選択する（ドラッグ選択と Ctrl+クリック）
• Date プロパティと SelectedDates プロパティを操作する

ナビゲーション機能

📄 参照： references/navigation.md

• 日、月、年、10 年単位の各モードを切り替える
• ヘッダーのナビゲーション、キーボードショートカット、アニメーションを制御する
• ヘッダーの外観とアニメーションのタイミングをカスタマイズする

日付選択の制限

📄 参照： references/restrict-dates.md

• 日付範囲の制約を設定する（MinDate と MaxDate）
• 範囲外の日付を非表示にする、または表示する
• すべての日付選択を無効にする、または特定の日付範囲を選択不可にする

外観とカスタマイズ

📄 参照： references/appearance.md

• 前景色、背景色、ブラシの色をカスタマイズする
• RTL レイアウトとフロー方向に対応する
• 日付計算に使用する Calendar オブジェクトのメソッド

クイックスタート

基本的な XAML の設定

<Window x:Class="CalendarDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        Title="Calendar Demo" Height="450" Width="500">
    <Grid>
        
        <syncfusion:CalendarEdit Name="calendarEdit"
                                 Height="250"
                                 Width="300"
                                 VerticalAlignment="Center"
                                 HorizontalAlignment="Center"/>
    </Grid>
</Window>

基本的な C# の設定

using Syncfusion.Windows.Shared;

CalendarEdit calendarEdit = new CalendarEdit();
calendarEdit.Height = 250;
calendarEdit.Width = 300;

// Get selected date
DateTime selectedDate = calendarEdit.Date;

// Set selected date programmatically
calendarEdit.Date = new DateTime(2024, 3, 15);

よく使われるパターン

パターン 1：範囲を制限した単一日付の選択

// Allow only dates in March 2024
calendarEdit.MinDate = new DateTime(2024, 3, 1);
calendarEdit.MaxDate = new DateTime(2024, 3, 31);
calendarEdit.Date = new DateTime(2024, 3, 15);

// Get the selected date
DateTime selectedDate = calendarEdit.Date;

パターン 2：複数の日付の選択

// Enable multiple date selection
calendarEdit.AllowMultiplySelection = true;

// Select multiple dates by dragging or Ctrl+clicking
// Retrieve all selected dates
var selectedDates = calendarEdit.SelectedDates;

パターン 3：特定の日付を選択不可にする（選択不可日付）

// Block specific date ranges
calendarEdit.BlackoutDates.Add(new DateTime(2024, 3, 5));
calendarEdit.BlackoutDates.Add(new DateTime(2024, 3, 20));

// Users cannot select these dates
calendarEdit.Date = new DateTime(2024, 3, 15);

パターン 4：カレンダーの外観をカスタマイズする

using System.Windows.Media;

// Customize colors
calendarEdit.Foreground = Brushes.Blue;
calendarEdit.Background = Brushes.White;
calendarEdit.MouseOverForeground = Brushes.Red;
calendarEdit.MouseOverBackground = Brushes.Lavender;

// Customize header
calendarEdit.HeaderBackground = Brushes.Green;
calendarEdit.HeaderForeground = Brushes.Yellow;

主要なプロパティのリファレンス

プロパティ	型	説明
Date	DateTime	現在選択されている日付を取得または設定します
SelectedDates	Collection	複数選択モードで選択されているすべての日付を取得します
AllowMultiplySelection	bool	複数の日付選択を有効または無効にします
MinDate	DateTime	選択できる最も早い日付を設定します
MaxDate	DateTime	選択できる最も遅い日付を設定します
BlackoutDates	Collection	選択できない日付を含みます
DisableDateSelection	bool	日付の選択を無効にします（月と年は引き続き選択できます）
MinMaxHidden	bool	MinDate/MaxDate の範囲外の日付を非表示にします
HeaderBackground	Brush	ヘッダーの背景色をカスタマイズします
HeaderForeground	Brush	ヘッダーのテキスト色をカスタマイズします
ChangeModeTime	int	モード変更時のアニメーション時間（ms）
FrameMovingTime	int	月の切り替え時のアニメーション時間（ms）

---

次のステップ： 実装する内容に応じて、上記からリファレンスファイルを選択してください。CalendarEdit を初めてセットアップする場合は、「はじめに」から始めてください。