syncfusion-aspnetcore-scheduler

实现 ASP.NET Core Scheduler

Syncfusion ASP.NET Core Scheduler 是一款功能全面的组件，可用于管理约会、事件和日程安排。它提供丰富的功能，可用于创建基于日历的应用程序，并支持多个视图、资源、重复事件和广泛的自定义选项。

何时使用此技能

• 约会管理： 创建、编辑和删除日历约会
• 多用户日程安排： 为多个用户或资源实现资源日程安排
• 日历视图： 以日、周、月、时间轴或议程格式显示事件
• 重复事件： 使用复杂的重复规则管理重复约会
• 数据集成： 将本地或远程数据源绑定到 Scheduler
• 自定义模板： 自定义事件外观和模板
• 工作时间： 配置营业时间、工作日和时区
• 事件操作： 通过拖放重新安排时间、调整大小和内联编辑

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 安装和 NuGet 包设置
• 添加 Tag Helper 和脚本资源
• 注册 Script Manager
• 初始化基本 Scheduler
• 填充约会并设置默认日期/视图

约会管理

📄 阅读： references/appointments.md

• 约会数据结构和字段映射
• 创建普通、全天、跨时段和重复事件
• 约会属性（Id、Subject、StartTime、EndTime、Location、Description）
• 重复约会和重复规则
• 处理重复事件的例外情况
• 拖放和内联编辑

CRUD 操作

📄 阅读： references/crud-operations.md

• 添加约会（编辑器窗口、addEvent 方法、服务器端插入）
• 编辑约会（saveEvent 方法、普通和重复事件）
• 删除约会（deleteEvent 方法，处理系列与单次事件）
• 处理冲突和验证
• 服务器端数据库操作
• 对多个更改执行批量操作

剪贴板操作

📄 阅读： references/clipboard-actions.md

• 使用 allowClipboard 属性启用剪贴板支持
• 使用 Scheduler 方法执行剪切、复制和粘贴操作
• 跨视图和跨 Scheduler 的剪贴板操作

虚拟滚动

📄 阅读： references/virtual-scrolling.md

• 在 Month 和 TimelineMonth 视图中启用 allowVirtualScrolling
• 生成大型事件和资源数据集以进行性能测试

打印、Excel 导出和 iCalendar (ICS)

📄 阅读： references/export-print.md

• 使用默认或自定义的高度、宽度和选定日期打印 Scheduler
• 使用自定义字段映射将约会导出到 Excel
• 将约会导出到 iCalendar (.ics) 文件
• 通过 Uploader 从 iCalendar (.ics) 文件导入约会

视图和配置

📄 阅读： references/views-and-modes.md

• 可用的视图类型（Day、Week、WorkWeek、Month、Year、Agenda、MonthAgenda、Timeline 视图）
• 设置 currentView 并在视图间切换
• 使用 e-schedule-views 配置特定视图
• 自定义开始/结束时间、工作日和时间刻度
• 日期格式和周末显示设置
• 配置最大事件堆叠数量，以限制每个单元格中可见的事件

调度功能

📄 阅读： references/scheduling-features.md

• 时间刻度配置（间隔和时段数量）
• 工作日和营业时间设置
• 时区支持（IANA 时区）
• 重复模式（RFC 5545 格式）
• 资源配置和分组
• 时间线视图和月视图的行自动高度
• 适用于响应式布局的自适应 UI
• 完整的调度配置示例

数据绑定

📄 阅读： references/data-binding.md

• 使用 DataSource 进行本地数据绑定
• 使用 ODataV4Adaptor 进行远程数据绑定
• 自定义适配器创建
• 查询参数和筛选器
• AJAX 数据加载
• 使用 UrlAdaptor 配置 CRUD 操作
• Google Calendar 集成

资源和分组

📄 阅读： references/resources-and-grouping.md

• 资源调度模式概览
• 单资源和多资源调度
• 资源分组、颜色元数据和工作时间
• 时间线视图和远程资源绑定

自定义和模板

📄 阅读： references/customization.md

• 事件模板和单元格模板
• 使用 eventRendered 事件自定义事件
• 日期标题模板
• 快速信息模板
• CSS 类自定义
• 工具提示模板和显示选项
• 自定义编辑器窗口配置
• 防止事件重叠

高级功能

📄 阅读： references/advanced-features.md

• 资源分组和多资源调度
• 时区支持和转换
• 状态持久化
• 本地化和无障碍功能
• 行内预约编辑
• 只读模式和预约屏蔽
• 速率限制指南
• 时区验证
• 基于角色的授权示例

快速入门示例

<head>
    
    
</head>
<body>
    
    <ejs-scripts></ejs-scripts>
</body>


@addTagHelper *, Syncfusion.EJ2

<ejs-schedule id="schedule" width="100%" height="550" selectedDate="new DateTime(2024, 3, 28)" currentView="Week">
    <e-schedule-eventsettings dataSource="ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>

// Controller
public class HomeController : Controller
{
    public IActionResult Index()
    {
        ViewBag.datasource = new List<AppointmentData>
        {
            new AppointmentData { 
                Id = 1, 
                Subject = "Meeting", 
                StartTime = new DateTime(2024, 3, 28, 9, 0, 0),
                EndTime = new DateTime(2024, 3, 28, 10, 0, 0)
            }
        };
        return View();
    }
}

public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

常见模式

以编程方式添加事件

// Use addEvent method to create appointments
<script>
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
scheduleObj.addEvent({
    Id: 2,
    Subject: 'New Meeting',
    StartTime: new Date(2024, 2, 28, 10, 0),
    EndTime: new Date(2024, 2, 28, 11, 0)
});
</script>

处理 CRUD 操作

// Server-side in DataManager with CrudUrl
var dataManager = new DataManager() {
    Url = "Home/GetData",
    Adaptor = "UrlAdaptor",
    CrudUrl = "Home/UpdateData",
    // Configure server-side CORS with explicit allowed origins rather than relying on a client-side CrossDomain flag.
};

创建重复事件

// RecurrenceRule follows iCalendar (RFC 5545) format
new AppointmentData {
    Id = 1,
    Subject = "Daily Standup",
    StartTime = new DateTime(2024, 3, 28, 9, 0, 0),
    EndTime = new DateTime(2024, 3, 28, 9, 30, 0),
    RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=10"
}

配置多个视图

<ejs-schedule id="schedule" currentView="Week">
    <e-schedule-views>
        <e-schedule-view option="Day"></e-schedule-view>
        <e-schedule-view option="Week"></e-schedule-view>
        <e-schedule-view option="Month"></e-schedule-view>
        <e-schedule-view option="TimelineDay"></e-schedule-view>
    </e-schedule-views>
</ejs-schedule>

关键属性和事件

调度器核心属性

• currentView：活动视图类型（Day、Week、WorkWeek、Month、Year、Agenda、MonthAgenda、TimelineDay、TimelineWeek、TimelineWorkWeek、TimelineMonth、TimelineYear）
• selectedDate：调度器当前显示的日期
• readonly：设为 true 时禁用所有 CRUD 操作
• allowDragAndDrop：启用拖放（默认值：true）
• allowResizing：启用事件调整大小（默认值：true）
• allowMultiDrag：启用同时拖动多个事件
• allowInline：启用事件主题的行内编辑
• allowOverlap：设为 false 时防止事件重叠
• allowClipboard：在调度器上启用剪贴板支持（剪切、复制、粘贴）（默认值：false）。
• rowAutoHeight：自动调整工作单元格的高度，以容纳同一时间范围内的所有预约（适用于时间线视图和月视图）
• enableAdaptiveUI：为较小屏幕启用自适应（响应式）布局
• height 和 width：尺寸设置
• cssClass：用于样式设置的自定义 CSS 类

事件设置属性

• dataSource：绑定预约数据（数组或 DataManager）
• template：用于显示事件的自定义模板
• enableTooltip：显示预约工具提示
• tooltipTemplate：自定义工具提示内容
• enableMaxHeight：事件占据单元格的全部高度
• enableIndicator：多个事件时显示“更多”指示器
• spannedEventPlacement：多日事件的放置位置，可选 AllDayRow 或 TimeSlot
• sortComparer：用于重叠事件的自定义排序函数
• editFollowingEvents：允许编辑当前及后续重复事件
• maxEventStack：每个视图中每个单元格要显示的事件标签最大数量。0 表示显示所有事件；正数表示显示相应数量，并附带 +n more 指示器。

事件字段映射

• id：唯一的预约标识符（必填）
• subject：预约标题
• startTime：开始日期/时间（必填）
• endTime：结束日期/时间（必填）
• isAllDay：是否为全天事件
• location：事件地点
• description：事件详情
• recurrenceRule：重复模式（iCalendar 格式）
• recurrenceID：例外情况对应的父级重复事件 ID
• recurrenceException：重复事件中排除的日期
• followingID：用于编辑“后续事件”的父级事件 ID
• startTimezone：开始时间的时区（IANA 时区名称）
• endTimezone：结束时间的时区
• isReadonly：单个事件的只读标记
• isBlock：是否阻止时间段

重要事件

• actionBegin：在 CRUD 操作前触发
• actionComplete：CRUD 操作完成后触发
• actionFailure：服务器出错时触发
• eventRendered：事件渲染前触发（用于自定义）
• dragStart：开始拖动时触发
• dragStop：结束拖动时触发
• resizeStart：开始调整大小时触发
• popupOpen：编辑器窗口打开前触发
• tooltipOpen：工具提示显示前触发
• dataBound：数据绑定完成后触发

公共方法

• addEvent(eventData)：添加单个或多个预约
• saveEvent(eventData, action)：更新现有预约
• deleteEvent(eventData, action)：删除预约
• getEvents()：获取所有预约
• getCurrentViewEvents()：获取当前视图中的预约
• getEventDetails(element)：从 UI 元素获取事件数据
• refreshEvents()：刷新预约，无需完整重新加载
• navigateTo(date)：导航到指定日期
• navigatePrevious()：转到上一时间段
• navigateNext()：转到下一时间段
• isSlotAvailable(date, endDate, resourceId)：检查时段是否可用
• openOverlapAlert()：显示重叠验证警告
• cut(elements)：将指定的预约剪切到剪贴板（需要 allowClipboard="true"）
• copy(elements)：将指定的预约复制到剪贴板（需要 allowClipboard="true"）
• paste(targetElement)：将剪贴板内容粘贴到目标单元格（需要 allowClipboard="true"）
• closeQuickInfoPopup()：关闭快速信息弹窗（打开上下文菜单时很有用）

相关技能

• 数据绑定模式 - 连接数据源
• 自定义事件模板 - 设置样式和呈现方式
• 资源调度 - 多用户和资源管理