syncfusion-aspnetcore-calendars

Syncfusion ASP.NET Core カレンダーの実装

TimePicker

TimePicker は、ポップアップリストから時刻を選択したり、直接入力したりできる直感的な入力コンポーネントです。時刻範囲、厳密モード、マスキング、グローバル化、RTL、アクセシビリティ、および豊富なカスタマイズオプションに対応しています。

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージのインストールとセットアップ
• タグヘルパーの登録とスクリプト／スタイルの参照
• <ejs-timepicker> を使用した基本的な TimePicker の表示
• 値、最小時刻、最大時刻の設定
• 時刻の書式とステップ間隔の設定
• TimePickerFor のモデルバインディング

時刻範囲

📄 参照： references/time-range.md

• Min と Max による最小および最大時刻境界の設定
• 値が範囲外の場合の動作
• 2 つの TimePicker による範囲選択（開始時刻／終了時刻）
• 開始時刻の選択に応じた終了時刻の有効化／無効化
• 営業時間の選択パターン

厳密モード

📄 参照： references/strict-mode.md

• 有効な時刻入力を強制する StrictMode の有効化
• 範囲外の値を最小値／最大値に丸める処理
• エラークラスで状態を示すデフォルト（非厳密）モード
• 非厳密モードでの無効な値に対する null の動作

グローバル化

📄 参照： references/globalization.md

• Locale プロパティによるカルチャの設定
• 英語以外のカルチャ向けの CLDR データの読み込み
• L10n プレースホルダーのローカライズ
• アラビア語、ヘブライ語向けの EnableRtl による RTL サポート
• ドイツ語とアラビア語のカルチャの例

時刻のマスキング

📄 参照： references/time-masking.md

• EnableMask によるマスク入力の有効化
• 書式文字列に基づくマスクパターン
• MaskPlaceholder（時、分、秒）によるカスタムマスクプレースホルダー
• マスクされたセグメント内でのキーボード操作

スタイルと外観

📄 参照： references/style-appearance.md

• CssClass プロパティを使用した CSS のカスタマイズ
• 利用可能な CSS クラスの対象（ラッパー、アイコン、ポップアップ、リスト項目）
• 入力欄、ポップアップボタン、ポップアップリスト、ホバー／アクティブ状態のカスタマイズ
• FullScreenMode によるモバイルでの全画面ポップアップモード
• ラッパーの高さ、フォントサイズ、背景色の上書き

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 2.2 AA 準拠の詳細
• WAI-ARIA 属性：aria-haspopup、aria-selected、aria-disabled など
• キーボード操作の完全な一覧表
• スクリーンリーダーのサポート
• RTL、色のコントラスト、モバイルデバイスのサポート

ハウツーガイド

📄 参照： references/how-to.md

• FormValidator を使用したクライアント側のフォーム検証
• カスタムクラス名を使用した CSS のカスタマイズ
• モデルバインディングとフォーム POST による TimePickerFor の表示

API リファレンス

📄 参照： references/api.md

• 型、既定値、説明を含むすべてのプロパティ
• すべてのイベント（Change、Open、Close、Focus、Blur、Cleared、ItemRender、Created、Destroyed）
• CSS クラスのリファレンス表
• MaskPlaceholder のサブプロパティ
• タグヘルパー属性の構文一式

---

クイックスタート

1. NuGet パッケージをインストール：

Install-Package Syncfusion.EJ2.AspNet.Core

2. タグヘルパーを登録 ~/Pages/_ViewImports.cshtml に追加します：

@addTagHelper *, Syncfusion.EJ2

3. CSS とスクリプトを追加 ~/Pages/Shared/_Layout.cshtml に追加します：

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. Script Manager を追加 <body> の末尾に追加します：

<ejs-scripts></ejs-scripts>

5. TimePicker を表示します：

<ejs-timepicker id="timepicker"></ejs-timepicker>

---

よく使われるパターン

値、最小時刻、最大時刻を設定した TimePicker

@{
    var minVal = new DateTime(2022, 05, 07, 1, 00, 00);
    var maxVal = new DateTime(2022, 05, 07, 11, 00, 00);
    var value  = new DateTime(2022, 05, 07, 4, 00, 00);
}
<ejs-timepicker id="timepicker" value="value" min="minVal" max="maxVal"></ejs-timepicker>

カスタム書式とステップ

@{
    var value = new DateTime(2022, 05, 07, 4, 00, 00);
}
<ejs-timepicker id="timepicker" format="HH:mm" step="60" value="value"></ejs-timepicker>

厳密モード

<ejs-timepicker id="timepicker"
    value="@ViewBag.value"
    min="@ViewBag.minVal"
    max="@ViewBag.maxVal"
    strictMode="true">
</ejs-timepicker>

マスク入力

<ejs-timepicker id="timepicker" enableMask="true"></ejs-timepicker>

RTL（右から左）

<ejs-timepicker id="timepicker" placeholder="Select a time" enableRtl="true"></ejs-timepicker>

日付ピッカー

DatePicker は、カレンダーのポップアップから日付を選択したり、入力フィールドに直接入力したりできるグラフィカルユーザーインターフェイスコントロールです。日付範囲の制限、カスタム形式、マスク入力、グローバル化、厳密モード、カレンダービューの設定、RTL、アクセシビリティに対応しています。

ナビゲーションガイド

はじめに

📄 参照： references/datepicker-getting-started.md

• NuGet パッケージのインストールとセットアップ
• タグヘルパーの登録とスクリプト／スタイルの参照
• 基本的な <ejs-datepicker> のレンダリング
• value、min、max の日付の設定
• DatePickerFor のモデルバインディングとフォームの POST

日付範囲

📄 参照： references/datepicker-date-range.md

• 選択可能な日付範囲を制限するための min と max の設定
• デフォルトモードと厳密モードでの日付範囲外の動作
• 無効な日付や範囲外の日付を示すエラークラス
• コードビハインドからの min／max の更新

厳密モード

📄 参照： references/datepicker-strict-mode.md

• strictMode="true"：範囲外の入力を min／max に補正します
• strictMode="false"（デフォルト）：入力を受け付け、エラークラスを適用します
• 検証シナリオと表示シナリオに適したモードの選択

日付形式

📄 参照： references/datepicker-date-format.md

• カスタム表示形式（例：yyyy-MM-dd）を指定する format プロパティ
• 複数のユーザー入力形式を受け付ける inputFormats
• 一般的な形式トークンのリファレンス

日付のマスク

📄 参照： references/datepicker-date-masking.md

• enableMask によるマスク入力の有効化
• format から導出されるマスクパターン
• maskPlaceholder サブプロパティのカスタマイズ（日、月、年）
• マスクされたセグメント内でのキーボードナビゲーション
• 英語以外のカルチャ向けのローカライズされたマスクプレースホルダー

ビューとカレンダーの設定

📄 参照： references/datepicker-view.md

• 初期カレンダービュー（月／年／10 年）を指定する start プロパティ
• ナビゲーションの深さを制限する depth プロパティ
• 曜日ヘッダーの表示（短縮／最短／省略／完全）を指定する dayHeaderFormat
• weekNumber と firstDayOfWeek の設定

グローバル化

📄 参照： references/datepicker-globalization.md

• locale プロパティによるカルチャの設定
• 英語以外のカルチャ向けの CLDR データの読み込み
• 今日ボタンとプレースホルダーテキストの L10n ローカライズ
• アラビア語、ヘブライ語向けの enableRtl による RTL 対応
• ドイツ語とアラビア語のカルチャの例

スタイルと外観

📄 参照： references/datepicker-style-appearance.md

• スコープを限定したスタイルの上書きに使う cssClass
• CSS クラスのリファレンステーブル（ラッパー、アイコン、ポップアップ、日付セル）
• 入力ラッパー、アイコン、カレンダーポップアップのカスタマイズ
• セルごとのカスタマイズに使う renderDayCell イベント
• モバイルデバイス向けの fullScreenMode
• フローティングラベルの動作を指定する floatLabelType

アクセシビリティ

📄 参照： references/datepicker-accessibility.md

• WCAG 2.2 AA 準拠
• WAI-ARIA 属性（aria-expanded、aria-disabled、aria-activedescendant）
• キーボード操作の全テーブル（入力とカレンダーポップアップ）
• スクリーンリーダー対応と RTL

ハウツーガイド

📄 参照： references/datepicker-how-to.md

• FormValidator によるクライアント側の検証
• DatePickerFor のモデルバインディングとサーバー側フォームの POST
• プレースホルダーと読み取り専用状態の設定
• DatePicker の無効化（enabled="false"）
• 入力フォーカス時にポップアップを開く（openOnFocus または show() メソッド）
• ポップアップが閉じないようにする（preventDefault）
• 曜日ヘッダー形式のカスタマイズ

API リファレンス

📄 参照： references/datepicker-api.md

• すべてのプロパティと型、デフォルト値、説明
• すべてのイベントと説明、引数
• MaskPlaceholder のサブプロパティ
• CSS クラスのリファレンステーブル
• タグヘルパー属性の構文全般

---

クイックスタート

1. NuGet パッケージをインストールします：

Install-Package Syncfusion.EJ2.AspNet.Core

2. ~/Pages/_ViewImports.cshtml でタグヘルパーを登録します：

@addTagHelper *, Syncfusion.EJ2

3. ~/Pages/Shared/_Layout.cshtml に CSS とスクリプトを追加します：

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. <body> の末尾にスクリプトマネージャーを追加します：

<ejs-scripts></ejs-scripts>

5. DatePicker をレンダリングします：

<ejs-datepicker id="datepicker" placeholder="Select a date"></ejs-datepicker>

---

よく使われるパターン

Value、Min、Max を指定した DatePicker

@{
    var minDate = new DateTime(2025, 5, 5);
    var maxDate = new DateTime(2025, 5, 27);
    var value   = new DateTime(2025, 5, 15);
}
<ejs-datepicker id="datepicker"
    value="@value"
    min="@minDate"
    max="@maxDate"
    placeholder="Select a date">
</ejs-datepicker>

カスタム形式

<ejs-datepicker id="datepicker"
    format="yyyy-MM-dd"
    placeholder="YYYY-MM-DD">
</ejs-datepicker>

厳密モード

<ejs-datepicker id="datepicker"
    min="@ViewBag.MinDate"
    max="@ViewBag.MaxDate"
    strictMode="true">
</ejs-datepicker>

マスク付き入力

<ejs-datepicker id="datepicker" enableMask="true"></ejs-datepicker>

DatePickerFor（モデルバインディング）

@model AppModel
<ejs-datepickerfor id="date" for="@Model.Date" placeholder="Select a date">
</ejs-datepickerfor>

RTL（右から左）

<ejs-datepicker id="datepicker" locale="ar" enableRtl="true"></ejs-datepicker>

DateTimePicker

DateTimePicker は、日付と時刻を組み合わせたポップアップ（カレンダー＋時刻リスト）から選択したり、入力フィールドに直接入力したりできるグラフィカルユーザーインターフェイスコントロールです。日付と時刻の範囲制限、カスタム形式、入力形式の柔軟な指定、マスク付き入力、グローバリゼーション、厳密モード、カレンダービューの設定、RTL、アクセシビリティに対応しています。

ナビゲーションガイド

はじめに

📄 参照： references/datetimepicker-getting-started.md

• NuGet パッケージのインストールとセットアップ
• タグヘルパーの登録とスクリプト／スタイルの参照
• <ejs-datetimepicker> の基本的なレンダリング
• value、min、max の日付と時刻の設定
• DateTimePickerFor のモデルバインディングとフォームの POST
• openOnFocus、readonly、showClearButton オプション

日付と時刻の範囲

📄 参照： references/datetimepicker-date-time-range.md

• min と max を設定して日付と時刻の範囲全体を制限する方法
• minTime と maxTime を設定して日ごとの時刻を制限する方法
• デフォルトモードと厳密モードにおける範囲外の動作
• min／max と minTime／maxTime の両方を設定した場合の優先順位
• コードビハインドから範囲の値を更新する方法

厳密モード

📄 参照： references/datetimepicker-strict-mode.md

• strictMode="true"：範囲外の入力を min／max の値に補正します
• strictMode="false"（デフォルト）：入力を受け付け、エラークラスを適用します
• 検証と表示の用途に応じて適切なモードを選択する方法

日付と時刻の形式

📄 参照： references/datetimepicker-date-time-format.md

• カスタム表示形式（例：yyyy-MM-dd hh:mm）を指定する format プロパティ
• 時刻ポップアップリストの表示に使用する timeFormat
• 複数のユーザー入力形式を受け付ける inputFormats
• 一般的な形式トークンのリファレンス

日付と時刻のマスク

📄 参照： references/datetimepicker-masking.md

• enableMask を使用したマスク付き入力の有効化
• format から導出されるマスクパターン
• maskPlaceholder サブプロパティのカスタマイズ（日、月、年、時、分、秒）
• マスクされたセグメント内でのキーボード操作
• 英語以外のカルチャ向けにローカライズされたマスクプレースホルダー

グローバリゼーション

📄 参照： references/datetimepicker-globalization.md

• locale プロパティによるカルチャの設定
• 英語以外のカルチャ向けの CLDR データの読み込み
• 今日ボタンとプレースホルダーテキストをローカライズする L10n
• アラビア語、ヘブライ語向けの enableRtl による RTL サポート
• ドイツ語とアラビア語のカルチャ例

スタイルと外観

📄 参照： references/datetimepicker-style-appearance.md

• スコープを限定したスタイルの上書きに使用する cssClass
• CSS クラスのリファレンステーブル（ラッパー、アイコン、時刻ポップアップ、カレンダーポップアップ）
• 入力ラッパー、日付／時刻アイコン、ポップアップのカスタマイズ
• セルごとのカスタマイズに使用する renderDayCell イベント
• モバイルデバイス向けの fullScreenMode
• フローティングラベルの動作を指定する floatLabelType

アクセシビリティ

📄 参照: references/datetimepicker-accessibility.md

• WCAG 2.2 AA に準拠
• WAI-ARIA 属性（aria-expanded、aria-disabled、aria-activedescendant）
• キーボード操作の完全な一覧表（入力、カレンダーポップアップ、時刻ポップアップ）
• スクリーンリーダーのサポートと RTL

ハウツーガイド

📄 参照: references/datetimepicker-how-to.md

• DateTimePickerFor のモデルバインディングとサーバー側のフォーム POST
• DateTimePicker を無効にする（enabled="false"）
• プレースホルダーと読み取り専用状態の設定
• 日付ヘッダー形式のカスタマイズ（dayHeaderFormat）
• renderDayCell を使った特定の日付の無効化
• カレンダー表示の設定（start / depth）
• 週番号の表示と状態の保持

API リファレンス

📄 参照: references/datetimepicker-api.md

• 型、既定値、説明を含むすべてのプロパティ
• 説明を含むすべてのイベント
• MaskPlaceholder のサブプロパティ
• CSS クラスのリファレンス表
• 列挙値（CalendarView、DayHeaderFormats、CalendarType、FloatLabelType、WeekRule）
• タグヘルパー属性の完全な構文

---

クイックスタート

1. NuGet パッケージをインストールします：

Install-Package Syncfusion.EJ2.AspNet.Core

2. ~/Pages/_ViewImports.cshtml で Tag Helper を登録します：

@addTagHelper *, Syncfusion.EJ2

3. ~/Pages/Shared/_Layout.cshtml で CSS とスクリプトを追加します：

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. <body> の末尾に Script Manager を追加します：

<ejs-scripts></ejs-scripts>

5. DateTimePicker をレンダリングします：

<ejs-datetimepicker id="datetimepicker" placeholder="Select a date and time"></ejs-datetimepicker>

---

一般的なパターン

Value、Min、Max を指定した DateTimePicker

@{
    var minVal = new DateTime(2019, 5, 5, 2, 0, 0);
    var maxVal = new DateTime(2019, 5, 25, 2, 0, 0);
    var value  = new DateTime(2019, 5, 10, 10, 0, 0);
}
<ejs-datetimepicker id="datetimepicker"
    value="value"
    min="minVal"
    max="maxVal">
</ejs-datetimepicker>

カスタム形式

<ejs-datetimepicker id="datetimepicker"
    format="yyyy-MM-dd HH:mm"
    placeholder="YYYY-MM-DD HH:mm">
</ejs-datetimepicker>

厳密モード

<ejs-datetimepicker id="datetimepicker"
    min="@ViewBag.minVal"
    max="@ViewBag.maxVal"
    strictMode="true">
</ejs-datetimepicker>

マスク入力

<ejs-datetimepicker id="datetimepicker" enableMask="true"></ejs-datetimepicker>

DateTimePickerFor（モデルバインディング）

@model BookingModel
<ejs-datetimepicker id="datetimepicker" for="BookingDateTime"></ejs-datetimepicker>

RTL（右から左）

<ejs-datetimepicker id="datetimepicker" locale="ar" enableRtl="true"></ejs-datetimepicker>

---

DateRangePicker

DateRangePicker は、デュアルカレンダーのポップアップから開始日と終了日を選択するか、入力フィールドに直接入力できるグラフィカルユーザーインターフェイスコントロールです。日付範囲の制限、範囲の長さの上限と下限、カスタム形式、柔軟な入力形式、プリセット、グローバリゼーション、厳密モード、日付セルのカスタマイズ、RTL、アクセシビリティをサポートしています。

ナビゲーションガイド

はじめに

📄 参照: references/daterangepicker-getting-started.md

• NuGet パッケージのインストールとセットアップ
• タグヘルパーの登録とスクリプト／スタイルの参照
• 基本的な <ejs-daterangepicker> のレンダリング
• startDate と endDate の設定
• DateRangePickerFor のモデルバインディングとフォーム POST

範囲の制限

📄 参照: references/daterangepicker-range-restriction.md

• 選択可能な日付を制限する min と max の設定
• minDays と maxDays による範囲の長さの制限
• strictMode の動作：範囲内への調整とエラークラス
• 範囲外の場合の動作の概要表

日付形式

📄 参照: references/daterangepicker-date-format.md

• 表示形式をカスタマイズする format プロパティ
• 柔軟なユーザー入力を可能にする inputFormats 配列
• 日付間の区切り文字をカスタマイズする separator
• 一般的な形式トークンのリファレンス

カスタマイズ

📄 参照: references/daterangepicker-customization.md

• 個々のセルを無効化／スタイル設定する renderDayCell イベント
• firstDayOfWeek の設定
• dayHeaderFormat（Short／Narrow／Abbreviated／Wide）
• カレンダー表示の start と depth
• weekNumber と weekRule の設定
• 範囲をすばやく選択するためのプリセット
• openOnFocus、readonly、allowEdit、showClearButton
• 再読み込み後も状態を保持する enablePersistence

グローバリゼーション

📄 参照: references/daterangepicker-globalization.md

• 文化圏を設定する locale プロパティ
• 英語以外の文化圏で CLDR データを読み込む方法
• L10n によるローカライズ（placeholder、startLabel、endLabel、applyText、cancelText、selectedDays、days、customRange）
• アラビア語、ヘブライ語向けの enableRtl
• ドイツ語とアラビア語の文化圏の例

スタイルと外観

📄 参照: references/daterangepicker-style-appearance.md

• スコープを限定したスタイルの上書きに使用する cssClass
• ラッパー、アイコン、範囲ヘッダー、カレンダーコンテンツの CSS カスタマイズ
• フッターの適用／キャンセルボタンのカスタマイズ
• フローティングラベルの動作を設定する floatLabelType
• モバイルデバイス用の fullScreenMode
• CSS クラスの完全なリファレンステーブル

アクセシビリティ

📄 参照: references/daterangepicker-accessibility.md

• WCAG 2.2 AA 準拠
• WAI-ARIA 属性（aria-expanded、aria-disabled、aria-activedescendant）
• 入力とカレンダーのキーボード操作テーブル
• スクリーンリーダーのサポートと RTL

ハウツーガイド

📄 参照: references/daterangepicker-how-to.md

• DateRangePickerFor のモデルバインディングとサーバー側のフォーム POST
• プレースホルダーテキストの設定
• DateRangePicker の無効化（enabled="false"）
• 日付ヘッダー形式のカスタマイズ
• cssClass と CSS クラスリファレンスを使用した CSS カスタマイズ

API リファレンス

📄 参照: references/daterangepicker-api.md

• 型、既定値、説明を含むすべてのプロパティ
• 説明を含むすべてのイベント
• プリセットのサブプロパティ（label、start、end）
• 列挙型の値（CalendarView、DayHeaderFormats、FloatLabelType、WeekRule）
• CSS クラスのリファレンステーブル
• タグヘルパー属性構文の完全な説明

---

クイックスタート

1. NuGet パッケージをインストールします：

Install-Package Syncfusion.EJ2.AspNet.Core

2. ~/Pages/_ViewImports.cshtml でタグヘルパーを登録します：

@addTagHelper *, Syncfusion.EJ2

3. ~/Pages/Shared/_Layout.cshtml に CSS とスクリプトを追加します：

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. <body> の末尾にスクリプトマネージャーを追加します：

<ejs-scripts></ejs-scripts>

5. DateRangePicker をレンダリングします：

<ejs-daterangepicker id="daterangepicker" placeholder="Select a Range"></ejs-daterangepicker>

---

よくあるパターン

開始日と終了日を指定した DateRangePicker

@{
    var startDate = new DateTime(2022, 11, 09);
    var endDate   = new DateTime(2022, 11, 21);
}
<ejs-daterangepicker id="daterangepicker"
    startDate="startDate"
    endDate="endDate"
    placeholder="Select a Range">
</ejs-daterangepicker>

最小／最大日付の制限

<ejs-daterangepicker id="daterangepicker"
    min="@ViewBag.minDate"
    max="@ViewBag.maxDate"
    placeholder="Enter a Range">
</ejs-daterangepicker>

範囲の長さの制限

<ejs-daterangepicker id="daterangepicker"
    minDays="5"
    maxDays="10"
    placeholder="Select 5–10 days">
</ejs-daterangepicker>

厳密モード

<ejs-daterangepicker id="daterangepicker"
    strictMode="true"
    min="@ViewBag.minDate"
    max="@ViewBag.maxDate"
    startDate="@ViewBag.startDate"
    endDate="@ViewBag.endDate">
</ejs-daterangepicker>

入力形式を指定したカスタム形式

<ejs-daterangepicker id="daterangepicker"
    format="dd/MMM/yy"
    inputFormats="@(new string[] { "dd/MM/yyyy", "yyyyMMdd" })"
    placeholder="DD/MMM/YY">
</ejs-daterangepicker>

DateRangePickerFor（モデルバインディング）

@model DateRangeModel
<form method="post">
    <ejs-daterangepicker id="daterangepickerFor" ejs-for="@Model.value">
    </ejs-daterangepicker>
    <ejs-button id="submitButton" content="Submit"></ejs-button>
</form>

RTL（右から左）

<ejs-daterangepicker id="daterangepicker" locale="ar" enableRtl="true"></ejs-daterangepicker>

カレンダー

Calendar は、グレゴリオ暦（またはイスラム暦）を表示するグラフィカルユーザーインターフェイスのコントロールで、月、年、10 年単位のビューを切り替えて日付を選択できます。日付範囲の制限、複数選択、ビュー設定、日付セルのカスタマイズ、グローバリゼーション、RTL、アクセシビリティ、柔軟なスタイル設定をサポートしています。

ナビゲーションガイド

はじめに

📄 参照: references/calendar-getting-started.md

• NuGet パッケージのインストールとセットアップ
• タグヘルパーの登録とスクリプト／スタイルの参照
• <ejs-calendar> を使用した基本的なカレンダーのレンダリング
• value、min、max の日付設定
• 一般的な初期化パターン（無効化、永続化、cssClass）

カレンダービュー

📄 参照: references/calendar-views.md

• 利用可能なビュー：Month、Year、Decade
• レンダリング時の初期ビューを指定する start プロパティ
• ナビゲーションの深さを制限する depth プロパティ
• 年選択と10年単位の選択のパターン
• ビューのナビゲーション規則と制約

日付範囲

📄 参照: references/calendar-date-range.md

• 選択可能な日付を制限する min と max の設定
• 範囲外の日付の動作と値のクランプ
• JavaScript による動的な最小／最大値の更新
• 未来のみ、過去のみ、固定範囲の例

複数選択

📄 参照: references/calendar-multi-select.md

• isMultiSelection による複数日付選択の有効化
• values 配列による事前選択済みの日付の設定
• change イベントを使用した1週間全体の選択
• イベントハンドラーでの args.values の処理

カスタマイズ

📄 参照： references/calendar-customization.md

• renderDayCell イベントによる個々のセルの無効化やスタイル設定
• 週末の無効化
• カスタム CSS やツールチップによる特定の日付の強調表示
• 週末の強調表示
• dayHeaderFormat：短縮形、最短形、省略形、完全形
• firstDayOfWeek の設定
• weekNumber と weekRule のプロパティ
• CSS クラスのリファレンステーブル

グローバリゼーション

📄 参照： references/calendar-globalization.md

• locale プロパティによるカルチャの設定
• 英語以外のカルチャ向け CLDR データの読み込み
• Today ボタンのテキストをローカライズする L10n
• enableRtl による RTL サポート（アラビア語、ヘブライ語）
• calendarMode によるイスラム暦モード

スタイルと外観

📄 参照： references/calendar-style-appearance.md

• 外観を限定的に上書きする cssClass
• 背景、境界線、ホバー、タイトル、ナビゲーションアイコンのカスタマイズ
• Today ボタンと選択したセルの CSS
• CSS による他の月の日付の表示
• CSS クラスの完全なリファレンス

アクセシビリティ

📄 参照： references/calendar-accessibility.md

• WCAG 2.2 AA 準拠の詳細
• WAI-ARIA 属性：aria-label、aria-selected、aria-disabled、aria-activedescendant
• キーボード操作の完全な一覧表（すべてのナビゲーションキー）
• スクリーンリーダーのサポート
• RTL およびモバイルデバイスのアクセシビリティ

ハウツーガイド

📄 参照： references/calendar-how-to.md

• 週の開始曜日を変更する（firstDayOfWeek）
• 曜日ヘッダーの形式をカスタマイズする（dayHeaderFormat）
• 週番号を表示する（weekNumber）
• 一連の日付を選択する（週全体の選択）
• Calendar のフッターにクリアボタンを追加する（created イベント）
• 他の月の日付を表示する（CSS による方法）
• ナビゲーション時に月をスキップする（navigated イベント + navigateTo）

API リファレンス

📄 参照： references/calendar-api.md

• 型、既定値、説明を含むすべてのプロパティ
• すべてのイベント（Change、Created、Destroyed、Navigated、RenderDayCell）
• 列挙型のリファレンス（CalendarType、CalendarView、DayHeaderFormats、WeekRule）
• CSS クラスのリファレンステーブル
• タグヘルパー属性の構文一式

---

クイックスタート

1. NuGet パッケージをインストールします：

Install-Package Syncfusion.EJ2.AspNet.Core

2. ~/Pages/_ViewImports.cshtml で Tag Helper を登録します：

@addTagHelper *, Syncfusion.EJ2

3. ~/Pages/Shared/_Layout.cshtml に CSS とスクリプトを追加します：

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. <body> の末尾に Script Manager を追加します：

<ejs-scripts></ejs-scripts>

5. Calendar を描画します：

<ejs-calendar id="calendar"></ejs-calendar>

---

よくあるパターン

値、最小値、最大値を設定した Calendar

@{
    var minDate   = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 5);
    var maxDate   = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 27);
    var todayDate = DateTime.Now;
}
<ejs-calendar id="calendar"
    value="todayDate"
    min="minDate"
    max="maxDate">
</ejs-calendar>

年表示（年表示で開始し、月表示にドリルダウン）

<ejs-calendar id="calendar"
    start="Syncfusion.EJ2.Calendars.CalendarView.Year"
    depth="Syncfusion.EJ2.Calendars.CalendarView.Month">
</ejs-calendar>

複数選択

<ejs-calendar id="calendar"
    isMultiSelection="true"
    values="@ViewBag.multiValues">
</ejs-calendar>

週末を無効化

<ejs-calendar id="calendar" renderDayCell="disableWeekends"></ejs-calendar>
<script>
    function disableWeekends(args) {
        if (args.date.getDay() === 0 || args.date.getDay() === 6) {
            args.isDisabled = true;
        }
    }
</script>

RTL での週番号

<ejs-calendar id="calendar"
    weekNumber="true"
    locale="ar"
    enableRtl="true">
</ejs-calendar>

イスラム暦

<ejs-calendar id="calendar"
    calendarMode="Syncfusion.EJ2.Calendars.CalendarType.Islamic">
</ejs-calendar>