syncfusion-maui-toolkit-calendar について
Syncfusion SfCalendarを.NET MAUIアプリに実装、カスタマイズするためのスキルです。日付選択、表示切替、制限、スタイル、イベント、ローカライズを扱います。
主な機能
- 01単日・複数日・期間の選択
- 02月・年・十年・世紀表示
- 03日付範囲と独自検証
- 04スタイル・ローカライズ・RTL対応
- 05操作イベントと表示切替
活用シーン
- 01.NET MAUIアプリへの日付選択追加
- 02予約フローでの選択日制限
- 03カレンダーの外観と動作の調整
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-calendarインストール後、Claude Code で/syncfusion-maui-toolkit-calendarを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/calendar-modes.mdcalendar-views.mdcustomizations.mddate-navigation.mddate-restrictions.mddate-selection.mdevents.mdgetting-started.mdheaders-footers.mdlocalization-advanced.md詳細
.NET MAUI Calendar(SfCalendar)の実装
Syncfusion .NET MAUI Calendar コントロールを実装およびカスタマイズするための包括的なスキルです。SfCalendar は、複数の表示モード、豊富なカスタマイズオプション、柔軟な日付制限を備えた強力な日付選択機能を提供します。
このスキルを使用する場面
次のような場合にこのスキルを使用します。
- .NET MAUI アプリケーションにカレンダーコントロールを実装する
- 日付選択(単一の日付、複数の日付、または日付範囲)を有効にする
- カレンダー表示(月、年、10年、100年)を表示する
- 最小/最大日付やカスタム検証を使って日付選択を制限する
- カレンダーの外観(背景、テキストスタイル)をカスタマイズする
- カレンダーイベント(選択の変更、表示の変更、タップ)を処理する
- 週番号、週の開始曜日、前後の日付を設定する
- カレンダーのローカライズや RTL サポートを実装する
- 特定の日付の強調表示や週末のスタイル設定を追加する
- 日付や表示をプログラムから切り替える
コンポーネントの概要
SfCalendar は、次の機能を提供する多機能なカレンダーコントロールです。
- 単一の日付、複数の日付、または日付範囲を選択する
- 月、年、10年、100年の表示を切り替える
- MinimumDate、MaximumDate、EnablePastDates、または SelectableDayPredicate を使って日付を制限する
- カレンダーの外観をあらゆる面でカスタマイズする
- 包括的なイベントを通じてユーザー操作に応答する
主な機能:
- 柔軟なナビゲーションを実現する4種類のカレンダー表示
- 3種類の選択モード(単一、複数、範囲)
- 包括的な日付制限オプション
- 全面的なカスタマイズ(日付、今日、前後の日付)
- ユーザー操作に対応する豊富なイベントシステム
- ローカライズおよびグローバル化のサポート
- RTL(右から左)言語のサポート
ドキュメントとナビゲーションガイド
はじめに
📄 参照: references/getting-started.md
- インストールと NuGet パッケージの設定(Syncfusion.Maui.Toolkit)
- MauiProgram.cs でのハンドラー登録
- XAML および C# での SfCalendar の基本的な初期化
- 週の開始曜日のカスタマイズ
- 角の丸みの設定
カレンダー表示
📄 参照: references/calendar-views.md
- 月表示(既定、最も一般的)
- 月を選択するための年表示
- 年を選択するための10年表示
- 10年を選択するための100年表示
- NumberOfVisibleWeeks プロパティ
- 週番号の表示(ShowWeekNumber)
- 表示のナビゲーションと切り替え
日付選択
📄 参照: references/date-selection.md
- 単一選択モード(一度に1つの日付を選択)
- 複数選択モード(複数の日付を選択)
- 範囲選択モード(日付範囲を選択)
- 範囲選択用の EnableSwipeSelection
- RangeSelectionDirection(Forward、Backward、Both、None)
- SelectedDate/SelectedDates/SelectedRange を使ったプログラムからの選択
- 異なる表示での選択動作
日付制限
📄 参照: references/date-restrictions.md
- MinimumDate プロパティ(過去へのナビゲーションを制限)
- MaximumDate プロパティ(未来へのナビゲーションを制限)
- EnablePastDates プロパティ(今日より前の日付を無効化)
- SelectableDayPredicate(カスタム日付検証ロジック)
- 週末や特定の日付の無効化
- 日付検証のパターン
日付のナビゲーション
📄 参照: references/date-navigation.md
- プログラムからナビゲーションするための DisplayDate プロパティ
- プログラムからの表示切り替え
- AllowViewNavigation プロパティ
- NavigateToAdjacentMonth(前後の日付へのナビゲーション)
- 月/年を切り替えるスワイプジェスチャー
- ヘッダーのタップによる表示間のナビゲーション
カレンダーモードと表示オプション
📄 参照: references/calendar-modes.md
- 既定モード(インライン表示)
- ダイアログモード(中央に表示されるポップアップ)
- RelativeDialog モード(位置を指定できるポップアップ)
- CalendarRelativePosition 列挙型(AlignTop、AlignBottom、AlignToLeftOf、AlignToRightOf など)
- プログラムから制御するための IsOpen プロパティ
- PopupWidth および PopupHeight のカスタマイズ
- 日付ピッカーのパターン
カスタマイズとスタイル設定
📄 参照: references/customizations.md
- 月表示セルのカスタマイズ(日付、今日、前後の月の日付)
- テキストスタイル(TextStyle、TodayTextStyle、DisabledDatesTextStyle)
- すべてのセル状態に対する背景色
- 週末の日付のスタイル設定
- アイコン(Dot、Heart、Diamond、Star、Bell)を使った特定の日付の強調表示
- 年、10年、100年表示のカスタマイズ
- CalendarTextStyle のプロパティ(TextColor、FontSize、FontFamily)
イベントと操作
📄 参照: references/events.md
- ViewChanged イベント(表示や日付範囲の変更)
- SelectionChanged イベント(日付選択の変更)
- Tapped イベント(日付のシングルタップ)
- DoubleTapped イベント(日付のダブルタップ)
- LongPressed イベント(日付の長押し)
- イベント引数とデータ
- イベント処理のパターン
ヘッダーとフッター
📄 参照: references/headers-footers.md
- HeaderView のカスタマイズ(高さ、背景、テキストスタイル)
- ヘッダーテキスト形式のカスタマイズ
- ShowNavigationArrows プロパティ
- カスタムヘッダー UI 用の HeaderTemplate
- FooterView のカスタマイズ
- カスタムフッターテンプレート
ローカライズと高度な機能
📄 参照: references/localization-advanced.md
- グローバリゼーションとローカライズの設定
- CurrentUICulture の設定
- 複数言語向けのリソースファイルの作成
- RTL(右から左)サポート
- CalendarIdentifier(Gregorian、Hijri など)
- カレンダーモード
- 高度なビジュアルカスタマイズ