mcpField
S
syncfusion-blazor-scheduler

syncfusion-blazor-scheduler

github.com/syncfusion开发4388 次安装1 周前更新
代码仓库

关于 syncfusion-blazor-scheduler

面向 Blazor 开发者的 Syncfusion Blazor Scheduler 组件技能,涵盖日历排程、预约管理和组件配置。内容还包括多种日历视图、数据绑定、重复事件及自定义方式。

主要功能

  1. 01多种日历与时间线视图
  2. 02预约增删改查
  3. 03重复事件与规则
  4. 04拖放和调整大小
  5. 05本地及远程数据绑定
  6. 06资源分组与外观定制

适用场景

  1. 01构建 Blazor 排程界面
  2. 02配置重复预约与例外
  3. 03按资源分组显示日程
  4. 04绑定并筛选预约数据

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-scheduler

安装后在 Claude Code 中输入/syncfusion-blazor-scheduler确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

references/
appointment-appearance.md
appointment-customization.md
appointment-drag-and-drop.md
appointment-resizing.md
appointments.md
cell-customization.md
clipboard.md
crud-actions.md
data-binding.md
dimensions.md
editor-advanced-customization.md
editor-template.md
event-buffer.md
events.md
exporting.md
getting-started.md
header-bar.md
header-rows.md
ics-import-and-printing.md
localization.md
quick-popup-and-validation.md
recurring-events.md
resource-grouping-and-customization.md
resources.md
row-auto-height.md
scheduler-styling.md
state-persistence.md
timescale.md
timezone.md
view-configuration-and-customization.md

详细介绍

Syncfusion Blazor Scheduler 组件

何时使用此技能

当用户需要执行以下操作时,请使用此技能:

  • 创建或配置 Blazor Scheduler 组件
  • 绑定本地或远程数据
  • 管理预约、事件或日历数据
  • 设置不同的日历视图(Day、Week、Month、Timeline、Agenda)
  • 实现重复事件或重复模式
  • 处理预约的 CRUD 操作(创建、读取、更新、删除)
  • 配置预约拖放或调整大小
  • 为预约添加术前/术后缓冲时间
  • 使用资源或分组
  • 设置时区或本地化
  • 自定义 Scheduler 的外观或行为
  • 处理事件和回调
  • 持久化状态或管理数据绑定
  • 启用无障碍功能
  • 导出或打印 Scheduler 数据
  • 为大型数据集设置虚拟滚动
  • 使用剪贴板复制、剪切或粘贴功能
  • 配置自定义工具栏

组件概览

Syncfusion Blazor Scheduler 是一款全面的日历组件,可用于:

  • 在多个视图中显示预约(Day、Week、Month、Timeline、Agenda、Year)
  • 通过完整的 CRUD 操作和全面的控制来管理预约
  • 支持符合 iCalendar 标准的重复规则
  • 支持拖放和调整大小功能,实现直观的日程安排
  • 处理多个资源和灵活的分组模式
  • 支持带时区的预约,并提供 IANA 时区转换
  • 使用模板、EventRendered 事件和 CSS 类自定义预约外观
  • 使用 EnableBuffer 和 BufferTemplate 在预约前后渲染术前和术后缓冲区段
  • 阻止或自定义预约重叠(AllowOverlap 属性)
  • 配置时段占用和只读预约
  • 使用自定义模板显示交互式工具提示
  • 持久化状态并管理本地/远程数据绑定
  • 动态筛选、检索和刷新预约
  • 提供键盘导航、无障碍支持(WCAG 2.2)和 RTL 支持

文档与导航指南

入门

📄 阅读: references/getting-started.md

  • 通过 NuGet 包安装
  • 设置 Blazor 项目
  • 添加所需的命名空间和服务
  • 初始化基本组件
  • 第一个最简可运行示例
预约与事件字段

📄 阅读: references/appointments.md

  • 内置预约字段(Id、Subject、StartTime、EndTime、Location、Description、Timezone 等)
  • 自定义字段映射、绑定和验证
  • 带标签、默认值和验证规则的事件字段设置
  • 向预约添加自定义字段
  • 普通、跨时段、全天和占用事件
  • 只读预约和时段可用性
  • 自定义和防止事件重叠(AllowOverlap)
预约外观与管理

📄 阅读: references/appointment-appearance.md

  • 使用 EventRendered 设置预约外观
  • 工具提示(内置、自定义模板、条件式)
  • 选择和检索预约(GetEventsAsync、GetCurrentViewEvents)
  • 使用 Query 筛选预约
  • 使用 RefreshEventsAsync 刷新预约
预约自定义

📄 阅读: references/appointment-customization.md

  • 基于模板自定义事件
  • 使用 EventRendered 事件设置样式
  • 使用 CssClass 属性批量设置样式
  • 自定义属性和类
  • 修改事件外观
  • 使用模板自定义工具提示
拖放

📄 阅读: references/appointment-drag-and-drop.md

  • 启用/禁用拖放功能
  • 单项和多项拖动操作
  • 处理和阻止拖动事件
  • 拖动期间控制滚动
  • 在边缘触发导航
  • 拖动间隔和外部来源
  • 拖动完成时打开编辑器
调整大小事件

📄 阅读: references/appointment-resizing.md

  • 启用/禁用调整大小功能
  • 调整大小期间的滚动控制
  • 滚动速度配置
  • 调整大小的时间间隔
  • 防止特定的调整大小操作
事件缓冲区

📄 阅读: references/event-buffer.md

  • 在 ScheduleEventSettings 上使用 EnableBuffer 启用事件缓冲区
  • 预约模型中必需的 BufferBefore 和 BufferAfter 字段
  • 使用 FieldBufferBefore 和 FieldBufferAfter 映射缓冲区字段
  • 使用 BufferTemplate 自定义缓冲区外观
  • BufferTemplateContext 成员(IsBefore、Duration、Data)
  • AllowOverlap="false" 时的缓冲区行为
  • 支持的视图(Day、Week、WorkWeek、TimelineDay、TimelineWeek、TimelineWorkWeek)
  • 拖动和调整大小期间的缓冲区重新锚定
日程安排器视图

📄 阅读: references/views.md

  • 12 种可用视图模式(Day、Week、WorkWeek、Month、Agenda、MonthAgenda、TimelineDay、TimelineWeek、TimelineWorkWeek、TimelineMonth、TimelineYear、Year)
  • 使用 @bind-CurrentView 属性设置当前/活动视图
  • 视图配置属性表
  • ScheduleView 组件属性(Option、IsSelected、DateFormat、Readonly、ShowWeekend、WorkDays 等)
  • Day 视图包含按小时划分的时间段,并显示单日内容
  • Day 视图使用 Interval 属性显示多个连续日期(2 天、3 天视图)
  • Week 视图显示 7 天的一周(星期日到星期六)及所有预约
  • Week 视图使用 FirstDayOfWeek 自定义一周的第一天(1=星期一,0=星期日)
  • Work Week 视图仅显示工作日(默认星期一至星期五)
  • 使用 WorkDays 整数数组为每个视图自定义工作日(0=星期日,1=星期一等)
  • Month 视图采用完整的月历网格布局
  • Month 视图使用 MaxEventsPerRow 属性限制/扩展事件显示数量
  • Agenda 视图以按时间顺序排列的列表形式显示即将发生的事件(默认 7 天)
  • Agenda 视图使用 AgendaDaysCount 属性自定义日期范围
  • Agenda 视图使用 AllowVirtualScrolling 处理大型数据集
  • Month Agenda 视图将月历与下方的议程列表相结合
  • Timeline Day 视图以水平布局显示单日内容
  • Timeline Week 视图以水平方式显示 7 天的一周
  • Timeline Work Week 视图以水平方式显示工作日
  • Timeline Month 视图以水平方式显示整个月份
  • Timeline Year 视图以水平方式显示全年,并可自定义 Orientation
  • Year 视图显示迷你日历,支持选择月份并显示预约指示器
视图配置和自定义

📄 阅读: references/view-configuration-and-customization.md

  • 特定视图的配置属性表
  • 使用 MaxEventStack 限制 Day、Week 和 WorkWeek 视图中并发预约标签的数量
  • 使用 Interval 属性扩展视图间隔(3 天、2 周、季度、年度视图)
  • 使用 DisplayName 属性为扩展视图自定义显示名称
  • 使用 StartHour/EndHour 设置特定的开始和结束时间(例如,"09:00"-"18:00")
  • 将时间范围限制为仅显示营业时间
  • 使用 ShowWeekend="false" 在日历视图中隐藏周末
  • 使用 ShowWeekNumber="true" 显示 ISO 周数
  • 使用 Readonly="true" 为每个视图启用只读模式,以防止 CRUD 操作
  • 特定视图的模板(EventTemplate、DateHeaderTemplate、CellTemplate 等)
  • 为每个视图自定义事件模板,以实现不同的渲染效果
  • 为每个视图自定义日期标题模板
  • 为每个视图配置单元格模板和自定义单元格内容
  • 为每个视图自定义 DateFormat,以控制日期显示
  • 通过绑定 CurrentView 属性以编程方式切换视图
  • 通过标题工具栏内置的视图按钮进行视图导航
  • 为分组日程安排中的每个视图配置资源标题模板
  • 基于资源的视图配置和显示选项
事件与交互

📄 阅读: references/events.md

  • 所有 Scheduler 事件(ActionBegin、ActionCompleted、Created、Destroyed 等)
  • 事件参数和操作类型
  • 双向绑定和回调
  • DataBinding 和 DataBound 事件
  • 事件选择与检索
重复事件

📄 阅读: references/recurring-events.md

  • 重复规则语法和 iCalendar 格式
  • FREQ、INTERVAL、COUNT、UNTIL 属性
  • BYDAY、BYMONTHDAY、BYMONTH 配置
  • 创建重复事件
  • 例外日期和编辑事件实例
  • 编辑/删除后续事件
CRUD 操作

📄 阅读: references/crud-actions.md

  • 通过编辑器或 AddEventAsync 创建约会
  • 内联创建约会
  • 通过适当的验证更新约会
  • 删除单个或多个约会
  • 服务端数据库操作
  • 根据条件限制操作
数据绑定

📄 阅读: references/data-binding.md

  • 使用 List 集合进行本地数据绑定
  • 使用 HTTP 服务进行远程数据绑定
  • DataSource 配置
  • 基于查询的筛选
  • 动态刷新约会
  • DataSource 属性和事件设置
  • 按需加载数据
  • 设置用于身份验证/授权的自定义标头
自定义与样式设置

📄 阅读: references/scheduler-styling.md

  • CSS 自定义
  • 使用 CssClass 自定义样式
  • 覆盖组件样式
  • 响应式设计调整
单元格自定义

📄 阅读: references/cell-customization.md

  • 垂直视图和时间线视图中的单元格尺寸
  • 使用 CellTemplate 自定义内容
  • 使用 CellHeaderTemplate 自定义标头
  • 使用 OnRenderCell 事件动态设置样式
  • 设置周末和特定日期的样式
  • MinDate 和 MaxDate 限制
  • 多单元格和多行选择
标题栏和工具栏自定义

📄 阅读: references/header-bar.md

  • 使用 ShowHeaderBar 属性显示或隐藏标题栏
  • 使用 ScheduleToolBar 组件配置工具栏
  • 内置工具栏项(ScheduleToolBarPrevious、Next、DateRange、Today、Views、NewEvent)
  • 使用 ScheduleToolBarCustom 向工具栏添加自定义元素
  • 自定义项的 ItemType 选项(Button、Input、Spacer、Separator)
  • 创建带有用于导出、打印和其他操作的按钮的自定义工具栏
  • 向工具栏添加下拉控件,以按资源筛选
  • 包含所有者资源筛选的实际工具栏配置示例
  • 使用 EnableAdaptiveUI 属性实现响应式/移动友好布局
  • 自适应模式下的工具栏合并和“新建事件”按钮
  • 使用 DateHeaderTemplate 自定义日/周视图中的日期单元格
  • 使用 ElementType.DateHeader 的 OnRenderCell 事件动态设置日期标头样式
  • 设置日期标头中周末和特殊日期的样式
  • 使用 DateRangeTemplate 自定义显示的日期范围文本
  • 使用 DayHeaderTemplate 自定义 TimelineYear 视图标头
  • 使用 MonthHeaderTemplate 设置 TimelineYear 的月份标头
  • 使用 HeaderIndentTemplate 自定义时间线视图中的左侧缩进区域
  • 时间线视图中的垂直和水平方向
  • 按资源分组的视图标头
  • 组合多个模板以构建高级标头布局
标题行

📄 阅读: references/header-rows.md

  • ScheduleHeaderRow 组件结构和属性
  • HeaderRowType 枚举选项(Year、Month、Week、Date、Hour)
  • 每种标题行类型兼容的视图
  • 基本的多级标题行设置
  • 用于长时间范围时间线的年和月标题行
  • 用于按周组织的周数标题行
  • 使用 Interval=12 显示完整年份时间线
  • 用于详细日程安排的日期和小时标题行
  • 使用 Template 属性自定义标题行
  • 模板上下文以及在模板中访问 Date
  • 使用 CSS 类设置标题行样式
  • 自定义不同标题级别的颜色
  • 带有按资源分组视图的标题行
  • 组合多个标题行(2-5 个级别)
  • 标题行的顺序和层级指南
  • 按区域性本地化标题行
  • ISO 周数计算和显示
  • 常见模式(季度、每周、每日、资源视图)
  • 多行标题的性能注意事项
编辑器模板

📄 阅读: references/editor-template.md

  • 默认编辑器窗口和双击行为
  • 使用 Title 属性自定义编辑器字段标签
  • 使用 ValidationRules(Required、RegexPattern、MinLength、MaxLength)进行字段验证
  • 使用 OnPopupOpen 事件编辑默认持续时间
  • 通过取消 PopupOpenEventArgs 阻止编辑器/快捷弹出窗口
  • 弹出窗口类型(Editor、QuickInfo、EditEventInfo、ViewEventInfo、EventContainer 等)
  • 使用 OpenEditorAsync 方法手动打开编辑器窗口
  • 使用 EditorTemplate 创建完全自定义的编辑器
  • 使用 EditorHeaderTemplate/EditorFooterTemplate 自定义编辑器页眉和页脚
  • 向编辑器模板添加资源下拉选项
编辑器高级自定义

📄 阅读: references/editor-advanced-customization.md

  • 向编辑器模板添加重复模式字段
  • 在编辑器模板中应用 DataAnnotations 验证
  • 单击时显示快捷信息弹出窗口(单元格和事件)
  • 使用 ScheduleQuickInfoTemplates 自定义快捷弹出窗口外观
  • 不同弹出场景的快捷弹出窗口模板类型(Cell、Event、Both)
快捷弹出窗口和验证

📄 阅读: references/quick-popup-and-validation.md

  • 快捷弹出窗口自定义组合
  • 快捷弹出窗口的自定义页眉、内容和页脚
  • 使用 ShowQuickInfo 或 OnPopupOpen 事件禁用快捷弹出窗口
  • 多单元格选择和 QuickInfoOnSelectionEnd 属性
  • AllowMultiRowSelection 对多日选择行为的控制
  • 单元格超出容量时显示更多事件指示器弹出窗口
  • 使用 MoreEventsClicked 事件阻止更多事件弹出窗口
  • 使用 CloseQuickInfoPopupAsync 方法以编程方式关闭弹出窗口
剪贴板操作

📄 阅读: references/clipboard.md

  • 复制/粘贴预约
  • 将事件数据复制到剪贴板
  • 粘贴处理和验证
  • 多预约操作
  • 键盘导航快捷键
资源和分组

📄 阅读: references/resources.md

  • ScheduleResource 组件结构和泛型参数
  • 资源字段映射(Field、TextField、IdField、ColorField 等)
  • 完整的资源字段参考表
  • 使用 List 集合绑定本地资源数据
  • 使用 ExpandoObject 为动态模型绑定资源
  • 使用自定义 DynamicObject 实现绑定资源
  • 使用 ObservableCollection 绑定资源以实现动态更新
  • 不使用可视化分组的多个资源(AllowMultiple 属性)
  • 使用 ScheduleGroup 进行单级资源分组
  • 多级层次化资源分组(GroupIDField)
资源分组与自定义

📄 阅读: references/resource-grouping-and-customization.md

  • 使用 ByGroupID="false" 进行一对一分组
  • 在日历视图中按日期分组资源(ByDate="true")
  • 跨资源共享事件(AllowGroupEdit="true")
  • 使用模板自定义简易资源标题
  • 为时间轴视图设置多列资源标题
  • 使用 ExpandedField 展开和折叠资源
  • 使用 HeaderTooltipTemplate 设置资源标题工具提示
  • 使用 ResourceColorField 选择资源颜色
  • 为每个资源自定义工作时间(StartHourField、EndHourField)
  • 为每个资源自定义工作日(WorkDaysField)
时间刻度配置

📄 阅读: references/timescale.md

  • 时间刻度槽与间隔
  • 主、次时间刻度设置
  • 自定义时间刻度格式
  • 时间显示选项
  • 工作时间配置
工作时间

📄 阅读: references/working-hours.md

  • 设置工作时间范围
  • 高亮显示工作时间
  • 高亮颜色与样式
  • 资源的营业时间
  • 自定义非工作时间
时区

📄 阅读: references/timezone.md

  • 支持 IANA 时区
  • StartTimezone 和 EndTimezone 字段
  • 时区转换
  • 夏令时处理
  • 时区感知型日程安排
本地化

📄 阅读: references/localization.md

  • 设置日期格式(DateFormat 属性)
  • 配置时间模式(TimeFormat 属性)
  • 支持从右向左(RTL)显示(EnableRtl 属性)
虚拟滚动

📄 阅读: references/virtual-scrolling.md

  • 虚拟滚动概述及适用场景(100+ 个资源、5,000+ 个预约)
  • 在时间线视图(TimelineDay、TimelineWeek、TimelineWorkWeek、TimelineMonth、TimelineYear)中启用 AllowVirtualScrolling
  • 在 Agenda 视图中使用虚拟滚动,处理大量即将发生的事件
  • 在按资源分组的 Timeline Month 视图中使用虚拟滚动
  • 虚拟滚动的优势(减少内存占用、流畅滚动、优化 DOM)
  • 使用 VirtualResourceCount 属性控制同时显示的资源数量(默认值为 30)
  • 为不同屏幕尺寸配置 VirtualResourceCount(标准屏幕为 20-50,大尺寸显示屏为 100+)
  • 在有 300+ 个资源且预约稀疏的情况下使用虚拟滚动
  • 将虚拟滚动与资源分组和分层组织结合使用
  • 将虚拟滚动与自定义模板(ResourceHeaderTemplate、EventTemplate)结合使用
  • 使用虚拟滚动的资源标题模板显示元数据
  • 使用虚拟滚动的事件模板自定义事件呈现
  • 使用 EnableLazyLoading="true" 属性延迟加载预约
  • 通过按视口加载数据的按需方式实现延迟加载
  • 延迟加载时在服务端按 ResourceId 筛选预约
  • 用于延迟加载的服务端控制器实现(ResourceId 查询参数)
  • 延迟加载参数(StartDate、EndDate、ResourceId 筛选)
  • 使用 DataManager 进行远程数据绑定时使用虚拟滚动
  • 结合使用虚拟滚动和延迟加载来处理海量数据集
  • 通过调整 VirtualResourceCount 优化虚拟滚动性能
  • 使用稀疏数据优化性能(并非所有资源每天都有事件)
  • 通过 EnableMaxHeight、AllowKeyboard 设置优化性能
  • 优化虚拟滚动的 CSS(will-change 属性、min-height)
  • 虚拟滚动的限制(不适用于 Month、Year、MonthAgenda 视图)
  • 虚拟滚动的限制(对 TimelineYear Vertical Orientation 的支持有限)
  • 不适合使用虚拟滚动的场景(资源数量少于 100 的小型数据集)
  • 将虚拟滚动与 MaxEventsPerRow 结合使用以优化单元格
  • 将虚拟滚动与按需滚动和自动加载资源结合使用
  • 虚拟滚动场景下的内存管理
  • 使用实际的大型数据集测试虚拟滚动性能
状态持久化

📄 阅读: references/state-persistence.md

  • 持久化属性(视图、日期)
  • 集成本地存储
导出和导入

📄 阅读: references/exporting.md

  • 使用 ExportToExcelAsync 将数据导出为 XLSX/CSV
  • 使用自定义字段和字段筛选进行导出
  • 将循环事件的每次发生导出为单独的记录(IncludeOccurrences)
  • 使用 CustomData 选项导出自定义事件数据子集
  • 使用 ExportFieldInfo 自定义列标题
  • 使用自定义文件名导出(FileName 属性)
  • Excel 文件格式(通过 ExportType 选择 XLSX 或 CSV)
  • 使用指定日期格式导出(DateFormat 选项)
  • 使用 OnExcelExporting 事件在导出前自定义 Excel 工作表
  • ExcelExport API,用于设置单元格格式、标题和样式
  • 将日历导出为 ICS 格式的 .ics 文件(兼容 Outlook、Google Calendar)
  • 使用自定义文件名导出 ICS
ICS 导入和打印

📄 阅读: references/ics-import-and-printing.md

  • 使用 ImportICalendarAsync 从外部 ICS 文件导入事件
  • 集成文件上传器以导入 ICS 文件
  • 将导入的事件与现有预约合并
  • 不带选项调用 PrintAsync 方法(默认打印)
  • 使用 PrintOptions 调用 PrintAsync 方法(自定义宽度和高度)
  • 打印当前视图中的所有可见预约
尺寸

📄 阅读: references/dimensions.md

  • 高度和宽度配置
  • 响应式尺寸
  • 行高自动调整
  • 单元格和列尺寸
  • 容器约束
行高自适应

📄 阅读: references/row-auto-height.md

  • 启用/禁用行高自适应
  • 行高计算
  • 内容溢出处理
  • 响应式行尺寸
性能与 WebAssembly

📄 阅读: references/webassembly-performance.md

  • 使用 @key 指令避免不必要的组件渲染
  • 使用 PreventRender 减少调度器事件后的重新渲染

快速入门示例

@using Syncfusion.Blazor.Schedule

<SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
    <ScheduleViews>
        <ScheduleView Option="View.Day"></ScheduleView>
        <ScheduleView Option="View.Week"></ScheduleView>
        <ScheduleView Option="View.WorkWeek"></ScheduleView>
        <ScheduleView Option="View.Month"></ScheduleView>
        <ScheduleView Option="View.Agenda"></ScheduleView>
    </ScheduleViews>
</SfSchedule>

@code{
    DateTime CurrentDate = new DateTime(2026, 3, 24);
    List<AppointmentData> DataSource = new List<AppointmentData>
    {
        new AppointmentData 
        { 
            Id = 1, 
            Subject = "Conference", 
            StartTime = new DateTime(2026, 3, 24, 9, 30, 0),
            EndTime = new DateTime(2026, 3, 24, 11, 0, 0)
        }
    };

    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public Nullable<int> RecurrenceID { get; set; }
    }
}

常见模式

1. CRUD 操作
  • 创建: 使用 AddEventAsync() 方法,或双击单元格打开编辑器
  • 读取: 使用 GetEventsAsync()、GetCurrentViewEvents() 或 GetBlockEventsAsync()
  • 更新: 修改预约并使用 SaveEventAsync()
  • 删除: 使用 DeleteEventAsync() 方法,或按 Delete 键进行多选删除
  • 检查可用性: 使用 IsSlotAvailableAsync() 防止时间重叠
2. 预约管理
  • 只读预约: 在单个事件上设置 IsReadonly = true,或使用 Readonly 属性
  • 屏蔽时间段: 设置 IsBlock = true,以防止在这些时间段安排日程
  • 重叠控制: 使用 AllowOverlap="false" 防止重叠
  • 自定义字段: 添加内置字段之外的自定义属性(Status、Priority 等)
  • 字段映射: 使用 ScheduleField 标签设置自定义字段名称
3. 外观自定义
  • 模板: 使用 <Template> 自定义预约 HTML
  • EventRendered: 根据数据应用动态 CSS 类
  • CssClass: 根据预约数据应用预定义的 CSS 类
  • 工具提示: 使用 EnableTooltip="true" 启用,并通过 TooltipTemplate 自定义
  • 单元格样式: 使用 OnRenderCell 事件或 CellTemplate
4. 事件处理
  • ActionBegin: 在操作前进行拦截(验证、取消、检查重叠)
  • ActionCompleted: 在操作成功后执行
  • EventRendered: 自定义预约外观
  • OnDragStart / OnResizeStart: 控制拖动/调整大小行为
  • TooltipOpening: 有条件地显示/隐藏工具提示
5. 视图管理
  • 设置 CurrentView 属性以更改当前视图
  • 使用各视图专属属性分别配置每个视图
  • 使用 DisplayName 设置自定义视图标签
  • 使用 Interval 属性扩展视图(例如,3 天视图)
6. 重复事件
  • 使用标准 iCalendar RecurrenceRule 格式(FREQ、INTERVAL、COUNT、UNTIL)
  • 添加 RecurrenceException 日期以排除特定事件
  • 对已编辑的事件使用 RecurrenceID
  • 使用 FREQ 属性支持每日、每周、每月和每年的重复模式
7. 数据绑定
  • 本地:将 DataSource 绑定到 List
  • 远程:绑定到返回数据的 HTTP 服务
  • 使用 Query 属性进行服务器端筛选
  • 调用 RefreshEventsAsync() 重新加载数据,无需完整刷新

关键属性和配置

属性用途示例
Height调度器的高度,单位为像素或百分比Height="650px"
Width调度器的宽度,单位为像素或百分比Width="100%"
CurrentView当前视图(Day、Week、Month 等)CurrentView="View.Week"
SelectedDate当前显示的日期@bind-SelectedDate="@date"
AllowDragAndDrop启用或禁用拖动功能AllowDragAndDrop="true"
AllowResizing启用或禁用调整大小功能AllowResizing="true"
AllowMultiDrag允许拖动多个预约AllowMultiDrag="true"
AllowOverlap防止预约重叠AllowOverlap="false"
AllowInline点击单元格时快速创建内联项目AllowInline="true"
Readonly只读模式(不支持 CRUD)Readonly="true"
MinDate最小日期边界MinDate="new DateTime(2026,1,1)"
MaxDate最大日期边界MaxDate="new DateTime(2026,12,31)"
CssClass用于样式设置的自定义 CSS 类CssClass="custom-scheduler"
EnableMaxHeight让预约占满单元格高度EnableMaxHeight="true"
EnableIndicator显示多个预约的指示器EnableIndicator="true"
EnableAutoRowHeight根据内容自动调整行高EnableAutoRowHeight="true"
EnableBuffer在预约周围渲染术前和术后缓冲时段(在 ScheduleEventSettings 上设置)EnableBuffer="true"

常见用例

  1. 员工排班 - 支持多个资源、拖放和审批工作流
  2. 会议室预订 - 基于资源的预订,支持时区
  3. 医生预约 - 重复时段,支持屏蔽患者
  4. 项目任务管理 - 使用时间线视图跟踪进度
  5. 教育课表 - 多个班级,支持资源分组
  6. 轮班管理 - 工作时间、轮班模式和重复安排
  7. 活动日历 - 支持重复安排和筛选的公开活动
  8. 现场服务调度 - 适配移动设备,支持离线使用

后续步骤: 根据你的用例阅读相应的参考文件,以了解具体功能和实现细节。

评论

支持 Markdown