syncfusion-aspnetcore-calendars

实现 Syncfusion ASP.NET Core 日历

时间选择器

时间选择器 是一个直观的输入组件，允许用户从弹出列表中选择时间值，或直接输入时间。它支持时间范围、严格模式、输入掩码、本地化、RTL、无障碍功能和丰富的自定义选项。

导航指南

入门

📄 阅读： references/getting-started.md

• NuGet 包安装与配置
• 标记帮助程序注册以及脚本和样式引用
• 使用 <ejs-timepicker> 呈现基本的时间选择器
• 设置值、最小时间和最大时间
• 配置时间格式和步进间隔
• TimePickerFor 模型绑定

时间范围

📄 阅读： references/time-range.md

• 使用 Min 和 Max 设置最小和最大时间边界
• 值超出范围时的行为
• 使用两个时间选择器选择范围（开始/结束时间）
• 根据开始时间选择启用/禁用结束时间
• 营业时间选择模式

严格模式

📄 阅读： references/strict-mode.md

• 启用 StrictMode 以强制输入有效时间
• 将超出范围的值限制为最小值/最大值
• 默认（非严格）模式下通过错误类进行提示
• 非严格模式下无效值的空值行为

本地化

📄 阅读： 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. 在 ~/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. 呈现时间选择器：

<ejs-timepicker id="timepicker"></ejs-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

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

• 使用 format 属性设置自定义显示格式（例如 yyyy-MM-dd）
• 使用 inputFormats 接受多种用户输入格式
• 常见格式标记参考

日期掩码

📄 阅读： references/datepicker-date-masking.md

• 使用 enableMask 启用掩码输入
• 掩码模式根据 format 生成
• 自定义 maskPlaceholder 子属性（日、月、年）
• 在掩码片段之间进行键盘导航
• 为非英语区域性本地化掩码占位符

视图和日历配置

📄 阅读： references/datepicker-view.md

• 使用 start 属性设置初始日历视图（月/年/十年）
• 使用 depth 属性限制导航深度
• 使用 dayHeaderFormat 设置星期标题显示格式（Short/Narrow/Abbreviated/Wide）
• 配置 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

• 用于自定义显示格式的 format 属性（例如，yyyy-MM-dd hh:mm）
• 用于显示时间弹出列表的 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 中注册标签辅助程序：

@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. 渲染 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 覆盖指定范围内的样式
• 自定义 wrapper、图标、范围标题和日历内容的 CSS
• 自定义页脚中的 Apply/Cancel 按钮
• 使用 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> 末尾添加 Script Manager：

<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 是一种图形用户界面控件，用于显示公历（或伊斯兰历）日历，允许用户通过浏览月、年和十年视图来选择日期。它支持日期范围限制、多选、视图配置、日期单元格自定义、全球化、RTL、无障碍功能以及丰富的样式设置。

导航指南

入门

📄 阅读： references/calendar-getting-started.md

• 安装和配置 NuGet 包
• 注册标签帮助器并引用脚本和样式
• 使用 <ejs-calendar> 渲染基本日历
• 设置 value、min 和 max 日期
• 常见初始化模式（禁用、持久化、cssClass）

日历视图

📄 阅读： references/calendar-views.md

• 可用视图：月、年、十年
• 使用 start 属性设置渲染时的初始视图
• 使用 depth 属性限制导航深度
• 年份选择器和十年选择器模式
• 视图导航规则和限制

日期范围

📄 阅读： references/calendar-date-range.md

• 设置 min 和 max 以限制可选日期
• 超出范围时的行为和值截取
• 通过 JavaScript 动态更新最小/最大值
• 仅限未来日期、仅限过去日期和固定范围示例

多选

📄 阅读： references/calendar-multi-select.md

• 使用 isMultiSelection 启用多日期选择
• 使用 values 数组设置预选日期
• 使用 change 事件选择整周
• 在事件处理程序中处理 args.values

自定义

📄 阅读： references/calendar-customization.md

• 使用 renderDayCell 事件禁用或设置单个单元格的样式
• 禁用周末
• 使用自定义 CSS 或工具提示突出显示特定日期
• 突出显示周末
• dayHeaderFormat：Short、Narrow、Abbreviated、Wide
• firstDayOfWeek 配置
• weekNumber 和 weekRule 属性
• CSS 类参考表

全球化

📄 阅读： references/calendar-globalization.md

• 使用 locale 属性设置区域设置
• 为非英语区域设置加载 CLDR 数据
• 使用 L10n 本地化 Today 按钮文本
• 使用 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 中注册标签助手：

@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>

---

常见模式

带 Value、Min 和 Max 的 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>