mcpField
S
syncfusion-maui-toolkit-calendar

syncfusion-maui-toolkit-calendar

github.com/syncfusionデザイン・UI3943 回インストール7 週間前に更新
リポジトリ

syncfusion-maui-toolkit-calendar について

Syncfusion SfCalendarを.NET MAUIアプリに実装、カスタマイズするためのスキルです。日付選択、表示切替、制限、スタイル、イベント、ローカライズを扱います。

主な機能

  1. 01単日・複数日・期間の選択
  2. 02月・年・十年・世紀表示
  3. 03日付範囲と独自検証
  4. 04スタイル・ローカライズ・RTL対応
  5. 05操作イベントと表示切替

活用シーン

  1. 01.NET MAUIアプリへの日付選択追加
  2. 02予約フローでの選択日制限
  3. 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.md
calendar-views.md
customizations.md
date-navigation.md
date-restrictions.md
date-selection.md
events.md
getting-started.md
headers-footers.md
localization-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 など)
  • カレンダーモード
  • 高度なビジュアルカスタマイズ

コメント