关于 syncfusion-blazor-scheduler
面向 Blazor 开发者的 Syncfusion Blazor Scheduler 组件技能,涵盖日历排程、预约管理和组件配置。内容还包括多种日历视图、数据绑定、重复事件及自定义方式。
主要功能
- 01多种日历与时间线视图
- 02预约增删改查
- 03重复事件与规则
- 04拖放和调整大小
- 05本地及远程数据绑定
- 06资源分组与外观定制
适用场景
- 01构建 Blazor 排程界面
- 02配置重复预约与例外
- 03按资源分组显示日程
- 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.mdappointment-customization.mdappointment-drag-and-drop.mdappointment-resizing.mdappointments.mdcell-customization.mdclipboard.mdcrud-actions.mddata-binding.mddimensions.mdeditor-advanced-customization.mdeditor-template.mdevent-buffer.mdevents.mdexporting.mdgetting-started.mdheader-bar.mdheader-rows.mdics-import-and-printing.mdlocalization.mdquick-popup-and-validation.mdrecurring-events.mdresource-grouping-and-customization.mdresources.mdrow-auto-height.mdscheduler-styling.mdstate-persistence.mdtimescale.mdtimezone.mdview-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" |
常见用例
- 员工排班 - 支持多个资源、拖放和审批工作流
- 会议室预订 - 基于资源的预订,支持时区
- 医生预约 - 重复时段,支持屏蔽患者
- 项目任务管理 - 使用时间线视图跟踪进度
- 教育课表 - 多个班级,支持资源分组
- 轮班管理 - 工作时间、轮班模式和重复安排
- 活动日历 - 支持重复安排和筛选的公开活动
- 现场服务调度 - 适配移动设备,支持离线使用
后续步骤: 根据你的用例阅读相应的参考文件,以了解具体功能和实现细节。