syncfusion-blazor-scheduler
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseSyncfusion Blazor Scheduler Component
Syncfusion Blazor Scheduler 组件
When to Use This Skill
何时使用此技能
Use this skill whenever the user needs to:
- Create or configure a Blazor Scheduler component
- Bind local or remote data
- Manage appointments, events, or calendar data
- Set up different calendar views (Day, Week, Month, Timeline, Agenda)
- Implement recurring events or recurrence patterns
- Handle appointment CRUD operations (create, read, update, delete)
- Configure appointment drag-and-drop or resizing
- Work with resources or grouping
- Set up timezones or localization
- Customize Scheduler appearance or behavior
- Handle events and callbacks
- Persist state or manage data binding
- Enable accessibility features
- Export or print scheduler data
- Set up virtual scrolling for large datasets
- Use clipboard copy, cut, or Paste features
- Configure custom toolbar
当用户需要以下操作时,可使用此技能:
- 创建或配置Blazor Scheduler组件
- 绑定本地或远程数据
- 管理预约、日程或日历数据
- 设置不同的日历视图(日视图、周视图、月视图、时间线视图、议程视图)
- 实现重复日程或重复模式
- 处理预约的CRUD操作(创建、读取、更新、删除)
- 配置预约的拖放或调整功能
- 处理资源或分组
- 设置时区或本地化
- 自定义Scheduler的外观或行为
- 处理事件和回调
- 持久化状态或管理数据绑定
- 启用无障碍功能
- 导出或打印调度数据
- 为大型数据集设置虚拟滚动
- 使用剪贴板的复制、剪切或粘贴功能
- 配置自定义工具栏
Component Overview
组件概述
The Syncfusion Blazor Scheduler is a comprehensive calendar component that allows you to:
- Display appointments in multiple views (Day, Week, Month, Timeline, Agenda, Year)
- Manage appointments with full CRUD operations and complete control
- Support recurring events with iCalendar-compatible recurrence rules
- Enable drag-and-drop and resizing functionality for intuitive scheduling
- Handle multiple resources and flexible grouping models
- Support timezone-aware appointments with IANA timezone conversion
- Customize appointment appearance with templates, EventRendered events, and CSS classes
- Prevent or customize overlapping appointments (AllowOverlap property)
- Configure blocking time slots and read-only appointments
- Display interactive tooltips with custom templates
- Persist state and manage local/remote data binding
- Filter, retrieve, and refresh appointments dynamically
- Provide keyboard navigation, accessibility (WCAG 2.2), and RTL support
Syncfusion Blazor Scheduler是一个功能全面的日历组件,可让您:
- 在多种视图(日视图、周视图、月视图、时间线视图、议程视图、年视图)中显示预约
- 通过完整的CRUD操作和全面控制来管理预约
- 支持符合iCalendar标准的重复规则的重复日程
- 启用直观的拖放和调整功能,便于调度
- 处理多资源和灵活的分组模型
- 支持时区感知预约,可进行IANA时区转换
- 通过模板、EventRendered事件和CSS类自定义预约外观
- 阻止或自定义重叠预约(AllowOverlap属性)
- 配置阻止时间段和只读预约
- 显示带自定义模板的交互式工具提示
- 持久化状态并管理本地/远程数据绑定
- 动态过滤、检索和刷新预约
- 提供键盘导航、无障碍支持(WCAG 2.2)和RTL支持
Documentation and Navigation Guide
文档与导航指南
Getting Started
入门指南
📄 Read: references/getting-started.md
- Installation via NuGet packages
- Setting up Blazor project
- Adding required namespaces and services
- Basic component initialization
- First minimal working example
📄 阅读: references/getting-started.md
- 通过NuGet包安装
- 设置Blazor项目
- 添加所需的命名空间和服务
- 基础组件初始化
- 第一个最简运行示例
Appointments and Event Fields
预约与日程字段
📄 Read: references/appointments.md
- Built-in appointment fields (Id, Subject, StartTime, EndTime, Location, Description, Timezone, etc.)
- Custom field mapping, binding, and validation
- Event field settings with labels, defaults, and validation rules
- Adding custom fields to appointments
- Normal, spanned, all-day, and blocked events
- Read-only appointments and slot availability
- Overlapping event customization and prevention (AllowOverlap)
- Appointment appearance with EventRendered styling
- Tooltips (built-in, custom templates, conditional)
- Appointment selection and retrieval (GetEventsAsync, GetCurrentViewEvents)
- Filtering appointments with Query
- Refresh appointments with RefreshEventsAsync
📄 阅读: references/appointments.md
- 内置预约字段(Id、Subject、StartTime、EndTime、Location、Description、Timezone等)
- 自定义字段映射、绑定和验证
- 带标签、默认值和验证规则的日程字段设置
- 为预约添加自定义字段
- 普通日程、跨时段日程、全天日程和阻止日程
- 只读预约和时段可用性
- 重叠日程的自定义和阻止(AllowOverlap)
- 通过EventRendered样式自定义预约外观
- 工具提示(内置、自定义模板、条件式)
- 预约选择和检索(GetEventsAsync、GetCurrentViewEvents)
- 使用Query过滤预约
- 调用RefreshEventsAsync刷新预约
Appointment Customization
预约自定义
📄 Read: references/appointment-customization.md
- Template-based event customization
- EventRendered event for styling
- CssClass property for bulk styling
- Custom attributes and classes
- Event appearance modifications
📄 阅读: references/appointment-customization.md
- 基于模板的日程自定义
- 用于样式设置的EventRendered事件
- 用于批量样式设置的CssClass属性
- 自定义属性和类
- 日程外观修改
Drag and Drop
拖放功能
📄 Read: references/appointment-drag-and-drop.md
- Enable/disable drag-and-drop functionality
- Single and multi-drag operations
- Drag event handling and prevention
- Scroll control during drag
- Navigation trigger on edges
- Drag intervals and external sources
- Opening editor on drag completion
📄 阅读: references/appointment-drag-and-drop.md
- 启用/禁用拖放功能
- 单个和多个日程的拖放操作
- 拖放事件处理和阻止
- 拖放期间的滚动控制
- 边缘触发导航
- 拖放间隔和外部源
- 拖放完成时打开编辑器
Resizing Events
日程调整
📄 Read: references/appointment-resizing.md
- Enable/disable resizing functionality
- Scroll control during resize
- Scroll speed configuration
- Resize time intervals
- Preventing specific resizing actions
📄 阅读: references/appointment-resizing.md
- 启用/禁用调整功能
- 调整期间的滚动控制
- 滚动速度配置
- 调整时间间隔
- 阻止特定的调整操作
Scheduler Views
Scheduler视图
📄 Read: references/views.md
- 12 available view modes (Day, Week, WorkWeek, Month, Agenda, MonthAgenda, TimelineDay, TimelineWeek, TimelineWorkWeek, TimelineMonth, TimelineYear, Year)
- Setting current/active view with @bind-CurrentView property
- View-specific configuration properties table
- ScheduleView component properties (Option, IsSelected, DateFormat, Readonly, ShowWeekend, WorkDays, etc.)
- Day view with hourly time slots and single-day display
- Day view with Interval property for multiple consecutive days (2-day, 3-day views)
- Week view displaying 7-day week (Sunday-Saturday) with all appointments
- Week view with FirstDayOfWeek customization (1=Monday, 0=Sunday)
- Work Week view showing only working days (Mon-Fri by default)
- Custom working days per view with WorkDays int array (0=Sun, 1=Mon, etc.)
- Month view with full month calendar grid layout
- Month view with MaxEventsPerRow property to limit/expand events display
- Agenda view displaying upcoming events in chronological list format (7 days default)
- Agenda view with AgendaDaysCount property for custom date range
- Agenda view with AllowVirtualScrolling for large datasets
- Month Agenda view combining month calendar with agenda list below
- Timeline Day view showing single day in horizontal layout
- Timeline Week view showing 7-day week horizontally
- Timeline Work Week view showing working days horizontally
- Timeline Month view showing entire month horizontally
- Timeline Year view showing full year horizontally with Orientation customization
- Year view displaying mini-calendar with month selection and appointment indicators
- Extending view intervals with Interval property (3-day, 2-week, quarterly, annual views)
- Display Name customization for extended views with DisplayName property
- Setting specific start and end hours with StartHour/EndHour (e.g., "09:00"-"18:00")
- Time range limiting to business hours only
- Hide weekends in calendar views using ShowWeekend="false"
- Display ISO week numbers with ShowWeekNumber="true"
- Readonly mode per view using Readonly="true" to prevent CRUD operations
- View-specific templates (EventTemplate, DateHeaderTemplate, CellTemplate, etc.)
- Event template customization per view for different rendering
- Date header template customization per view
- Cell templates and custom cell content per view
- DateFormat customization per view for date display
- Switching views programmatically with CurrentView property binding
- View navigation via header toolbar with built-in view buttons
- Resource header templates per view for grouped schedules
- Resource-based view configuration and display options
📄 阅读: references/views.md
- 12种可用视图模式(日视图、周视图、工作周视图、月视图、议程视图、月议程视图、时间线日视图、时间线周视图、时间线工作周视图、时间线月视图、时间线年视图、年视图)
- 使用@bind-CurrentView属性设置当前/活动视图
- 视图特定配置属性表
- ScheduleView组件属性(Option、IsSelected、DateFormat、Readonly、ShowWeekend、WorkDays等)
- 带小时时段和单日显示的日视图
- 使用Interval属性的日视图,支持连续多天(2天、3天视图)
- 显示7天一周(周日-周六)及所有预约的周视图
- 可自定义一周第一天的周视图(1=周一,0=周日)
- 仅显示工作日(默认周一至周五)的工作周视图
- 使用WorkDays整数数组为每个视图自定义工作日(0=周日,1=周一等)
- 带完整月日历网格布局的月视图
- 使用MaxEventsPerRow属性限制/扩展日程显示的月视图
- 按时间顺序显示即将到来的日程的议程视图(默认7天)
- 使用AgendaDaysCount属性自定义日期范围的议程视图
- 为大型数据集启用AllowVirtualScrolling的议程视图
- 结合月日历和下方议程列表的月议程视图
- 以横向布局显示单日的时间线日视图
- 以横向布局显示7天一周的时间线周视图
- 以横向布局显示工作日的时间线工作周视图
- 以横向布局显示整月的时间线月视图
- 可自定义Orientation的横向布局显示全年的时间线年视图
- 显示迷你日历、月选择和预约指示器的年视图
- 使用Interval属性扩展视图间隔(3天、2周、季度、年度视图)
- 使用DisplayName属性自定义扩展视图的显示名称
- 使用StartHour/EndHour设置特定的开始和结束时间(例如"09:00"-"18:00")
- 将时间范围限制为仅工作时间
- 使用ShowWeekend="false"在日历视图中隐藏周末
- 使用ShowWeekNumber="true"显示ISO周数
- 使用Readonly="true"为单个视图设置只读模式,阻止CRUD操作
- 视图特定模板(EventTemplate、DateHeaderTemplate、CellTemplate等)
- 为不同渲染效果按视图自定义日程模板
- 按视图自定义日期标题模板
- 按视图自定义单元格模板和单元格内容
- 按视图自定义日期显示的DateFormat
- 通过绑定CurrentView属性以编程方式切换视图
- 通过带内置视图按钮的标题工具栏进行视图导航
- 用于分组调度的按视图资源标题模板
- 基于资源的视图配置和显示选项
Events and Interactions
事件与交互
📄 Read: references/events.md
- All Scheduler events (ActionBegin, ActionCompleted, Created, Destroyed, etc.)
- Event arguments and action types
- Two-way binding and callbacks
- DataBinding and DataBound events
- Event selection and retrieval
📄 阅读: references/events.md
- 所有Scheduler事件(ActionBegin、ActionCompleted、Created、Destroyed等)
- 事件参数和操作类型
- 双向绑定和回调
- DataBinding和DataBound事件
- 日程选择和检索
Recurring Events
重复日程
📄 Read: references/recurring-events.md
- Recurrence rule syntax and iCalendar format
- FREQ, INTERVAL, COUNT, UNTIL properties
- BYDAY, BYMONTHDAY, BYMONTH configurations
- Creating recurring events
- Exception dates and editing occurrences
- Edit/delete following events
📄 阅读: references/recurring-events.md
- 重复规则语法和iCalendar格式
- FREQ、INTERVAL、COUNT、UNTIL属性
- BYDAY、BYMONTHDAY、BYMONTH配置
- 创建重复日程
- 例外日期和编辑单次出现的日程
- 编辑/删除后续日程
CRUD Operations
CRUD操作
📄 Read: references/crud-actions.md
- Create appointments via editor or AddEventAsync
- Inline appointment creation
- Update appointments with proper validation
- Delete single or multiple appointments
- Server-side database operations
- Restricting actions based on criteria
📄 阅读: references/crud-actions.md
- 通过编辑器或AddEventAsync创建预约
- 内联创建预约
- 带适当验证的预约更新
- 删除单个或多个预约
- 服务端数据库操作
- 根据条件限制操作
Data Binding
数据绑定
📄 Read: references/data-binding.md
- Local data binding with List collections
- Remote data binding with HTTP services
- DataSource configuration
- Query-based filtering
- Refresh appointments dynamically
- DataSource property and event settings
- Load data on demand
- Set custom headers for authentication/authorization
📄 阅读: references/data-binding.md
- 与List集合的本地数据绑定
- 与HTTP服务的远程数据绑定
- DataSource配置
- 基于Query的过滤
- 动态刷新预约
- DataSource属性和事件设置
- 按需加载数据
- 设置用于身份验证/授权的自定义请求头
Customization and Styling
自定义与样式设置
📄 Read: references/scheduler-styling.md
- CSS customization and theming
- Custom styling with CssClass
- Style overrides for components
- Color schemes and themes
- Responsive design adjustments
📄 阅读: references/scheduler-styling.md
- CSS自定义和主题设置
- 使用CssClass进行自定义样式设置
- 组件样式覆盖
- 配色方案和主题
- 响应式设计调整
Cell Customization
单元格自定义
📄 Read: references/cell-customization.md
- Cell dimensions in vertical and timeline views
- CellTemplate for custom content
- CellHeaderTemplate for headers
- OnRenderCell event for dynamic styling
- Weekend and specific date styling
- MinDate and MaxDate restrictions
- Multi-cell and multi-row selection
📄 阅读: references/cell-customization.md
- 垂直视图和时间线视图中的单元格尺寸
- 用于自定义内容的CellTemplate
- 用于标题的CellHeaderTemplate
- 用于动态样式设置的OnRenderCell事件
- 周末和特定日期的样式设置
- MinDate和MaxDate限制
- 多单元格和多行选择
Header Bar and Toolbar Customization
标题栏与工具栏自定义
📄 Read: references/header-bar.md
- ShowHeaderBar property to display or hide header
- ScheduleToolBar component for toolbar configuration
- Built-in toolbar items (ScheduleToolBarPrevious, Next, DateRange, Today, Views, NewEvent)
- ScheduleToolBarCustom for adding custom elements to toolbar
- ItemType options for custom items (Button, Input, Spacer, Separator)
- Creating custom toolbar with buttons for export, print, and other actions
- Adding dropdown controls to toolbar for filtering by resources
- Real-world toolbar configuration example with owner resource filtering
- EnableAdaptiveUI property for responsive/mobile-friendly layout
- Toolbar consolidation and "New Event" button in adaptive mode
- DateHeaderTemplate for customizing date cells in day/week views
- OnRenderCell event with ElementType.DateHeader for dynamic date header styling
- Weekend and special date styling in date header
- DateRangeTemplate for customizing displayed date range text
- TimelineYear view header customization with DayHeaderTemplate
- MonthHeaderTemplate for month headers in TimelineYear
- HeaderIndentTemplate for customizing left indent area in timeline views
- Vertical and horizontal orientation in timeline views
- Resource-grouped view headers
- Combining multiple templates for advanced header layouts
📄 阅读: 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
- 用于时间线年视图中月标题的MonthHeaderTemplate
- 用于自定义时间线视图左侧缩进区域的HeaderIndentTemplate
- 时间线视图中的垂直和水平方向
- 资源分组视图标题
- 结合多个模板实现高级标题布局
Header Rows
标题行
📄 Read: references/header-rows.md
- ScheduleHeaderRow component structure and properties
- HeaderRowType enum options (Year, Month, Week, Date, Hour)
- View compatibility for each header row type
- Basic multi-level header row setup
- Year and month header rows for long-range timelines
- Week number header rows for weekly organization
- Displaying complete year timeline with Interval=12
- Day and hour header rows for detailed scheduling
- Customizing header rows with Template property
- Template context and accessing Date in templates
- Header row styling with CSS classes
- Color customization for different header levels
- Header rows with resource-grouped views
- Combining multiple header rows (2-5 levels)
- Order and hierarchy guidelines for header rows
- Localization in header rows by culture
- ISO week number calculations and display
- Common patterns (quarterly, weekly, daily, resource views)
- Performance considerations with multiple rows
📄 阅读: references/header-rows.md
- ScheduleHeaderRow组件结构和属性
- HeaderRowType枚举选项(Year、Month、Week、Date、Hour)
- 每个标题行类型的视图兼容性
- 基础多级标题行设置
- 用于长范围时间线的年和月标题行
- 用于每周组织的周数标题行
- 使用Interval=12显示完整的年度时间线
- 用于详细调度的日和小时标题行
- 使用Template属性自定义标题行
- 模板上下文和在模板中访问Date
- 使用CSS类设置标题行样式
- 为不同标题级别自定义颜色
- 带资源分组视图的标题行
- 组合多个标题行(2-5级)
- 标题行的顺序和层次结构指南
- 按区域性进行标题行本地化
- ISO周数计算和显示
- 常见模式(季度、每周、每日、资源视图)
- 多标题行的性能考虑
Editor Template
编辑器模板
📄 Read: references/editor-template.md
- Default editor window and double-click behavior
- Customizing editor field labels with Title property
- Field validation using ValidationRules (Required, RegexPattern, MinLength, MaxLength)
- Editing default time duration with OnPopupOpen event
- Preventing editor/quick popups by canceling PopupOpenEventArgs
- Popup types (Editor, QuickInfo, EditEventInfo, ViewEventInfo, EventContainer, etc.)
- Opening editor window manually with OpenEditorAsync method
- Creating completely custom editor using EditorTemplate
- Customizing editor header and footer with EditorHeaderTemplate/EditorFooterTemplate
- Adding resource dropdown options to editor template
- Adding recurrence pattern fields to editor template
- Applying DataAnnotations validation in editor templates
- Quick info popups on single-click (cell and event)
- Customizing quick popup appearance with ScheduleQuickInfoTemplates
- Quick popup template types (Cell, Event, Both) for different popup scenarios
- Custom header, content, footer for quick popups
- Disabling quick popups with ShowQuickInfo or OnPopupOpen event
- Multiple cell selection and QuickInfoOnSelectionEnd property
- AllowMultiRowSelection for multi-day selection behavior
- More events indicator popup when cell exceeds capacity
- Preventing more events popup with MoreEventsClicked event
- CloseQuickInfoPopupAsync method to programmatically close popups
📄 阅读: references/editor-template.md
- 默认编辑器窗口和双击行为
- 使用Title属性自定义编辑器字段标签
- 使用ValidationRules进行字段验证(Required、RegexPattern、MinLength、MaxLength)
- 使用OnPopupOpen事件编辑默认时长
- 通过取消PopupOpenEventArgs阻止编辑器/快速弹出窗口
- 弹出窗口类型(Editor、QuickInfo、EditEventInfo、ViewEventInfo、EventContainer等)
- 使用OpenEditorAsync方法手动打开编辑器窗口
- 使用EditorTemplate创建完全自定义的编辑器
- 使用EditorHeaderTemplate/EditorFooterTemplate自定义编辑器标题和页脚
- 向编辑器模板添加资源下拉选项
- 向编辑器模板添加重复模式字段
- 在编辑器模板中应用DataAnnotations验证
- 单击时的快速信息弹出窗口(单元格和日程)
- 使用ScheduleQuickInfoTemplates自定义快速弹出窗口外观
- 针对不同弹出场景的快速弹出窗口模板类型(Cell、Event、Both)
- 自定义快速弹出窗口的标题、内容和页脚
- 使用ShowQuickInfo或OnPopupOpen事件禁用快速弹出窗口
- 多单元格选择和QuickInfoOnSelectionEnd属性
- 使用AllowMultiRowSelection实现多日选择行为
- 单元格容量超出时的更多日程指示器弹出窗口
- 使用MoreEventsClicked事件阻止更多日程弹出窗口
- 使用CloseQuickInfoPopupAsync方法以编程方式关闭弹出窗口
Clipboard Operations
剪贴板操作
📄 Read: references/clipboard.md
- Copy/paste appointments
- Copy event data to clipboard
- Paste handling and validation
- Multi-appointment operations
📄 阅读: references/clipboard.md
- 复制/粘贴预约
- 将日程数据复制到剪贴板
- 粘贴处理和验证
- 多预约操作
Resources and Grouping
资源与分组
📄 Read: references/resources.md
- ScheduleResource component structure and generic parameters
- Resource field mapping (Field, TextField, IdField, ColorField, etc.)
- Complete resource fields reference table
- Local resource data binding with List collections
- Binding resources with ExpandoObject for dynamic models
- Binding resources with DynamicObject custom implementation
- Binding resources with ObservableCollection for dynamic updates
- Multiple resources without visual grouping (AllowMultiple property)
- Single-level resource grouping with ScheduleGroup
- Multi-level hierarchical resource grouping (GroupIDField)
- One-to-One grouping with ByGroupID="false"
- Grouping resources by date (ByDate="true") in calendar views
- Shared events across resources (AllowGroupEdit="true")
- Simple resource header customization with templates
- Multiple column resource headers for timeline views
- Expand and collapse resources with ExpandedField
- Resource header tooltips with HeaderTooltipTemplate
- Resource color selection with ResourceColorField
- Custom working hours per resource (StartHourField, EndHourField)
- Custom working days per resource (WorkDaysField)
📄 阅读: references/resources.md
- ScheduleResource组件结构和泛型参数
- 资源字段映射(Field、TextField、IdField、ColorField等)
- 完整的资源字段参考表
- 与List集合的本地资源数据绑定
- 使用ExpandoObject绑定资源以支持动态模型
- 使用DynamicObject自定义实现绑定资源
- 使用ObservableCollection绑定资源以支持动态更新
- 无视觉分组的多资源(AllowMultiple属性)
- 使用ScheduleGroup进行单级资源分组
- 多级分层资源分组(GroupIDField)
- 一对一分组(ByGroupID="false")
- 在日历视图中按日期分组资源(ByDate="true")
- 跨资源共享日程(AllowGroupEdit="true")
- 使用模板进行简单的资源标题自定义
- 时间线视图的多列资源标题
- 使用ExpandedField展开和折叠资源
- 使用HeaderTooltipTemplate设置资源标题工具提示
- 使用ResourceColorField选择资源颜色
- 按资源自定义工作时间(StartHourField、EndHourField)
- 按资源自定义工作日(WorkDaysField)
Timescale Configuration
时间刻度配置
📄 Read: references/timescale.md
- Timescale slots and intervals
- Major and minor timescale settings
- Custom timescale format
- Time display options
- Work hours configuration
📄 阅读: references/timescale.md
- 时间刻度时段和间隔
- 主要和次要时间刻度设置
- 自定义时间刻度格式
- 时间显示选项
- 工作时间配置
Working Hours
工作时间
📄 Read: references/working-hours.md
- Setting working hours range
- Work hour highlighting
- Highlight color and styling
- Business hours for resources
- Non-working hour customization
📄 阅读: references/working-hours.md
- 设置工作时间范围
- 工作时间高亮
- 高亮颜色和样式设置
- 资源的工作时间
- 非工作时间自定义
Timezones
时区
📄 Read: references/timezone.md
- IANA timezone support
- StartTimezone and EndTimezone fields
- Timezone conversion
- Daylight saving time handling
- Timezone-aware scheduling
📄 阅读: references/timezone.md
- IANA时区支持
- StartTimezone和EndTimezone字段
- 时区转换
- 夏令时处理
- 时区感知调度
Localization
本地化
📄 Read: references/localization.md
- Supported languages and cultures
- Localized date/time formats
- Localized UI elements
- Custom localization resources
📄 阅读: references/localization.md
- 支持的语言和区域性
- 本地化日期/时间格式
- 本地化UI元素
- 自定义本地化资源
Virtual Scrolling
虚拟滚动
📄 Read: references/virtual-scrolling.md
- Virtual scrolling overview and when to use (100+ resources, 5,000+ appointments)
- Enable AllowVirtualScrolling in timeline views (TimelineDay, TimelineWeek, TimelineWorkWeek, TimelineMonth, TimelineYear)
- Virtual scrolling in Agenda view for large upcoming event lists
- Virtual scrolling in Timeline Month view with resource grouping
- Virtual scrolling benefits (reduced memory, smooth scrolling, DOM optimization)
- VirtualResourceCount property to control visible resources at once (default 30)
- VirtualResourceCount configuration for different screen sizes (20-50 standard, 100+ for large displays)
- Virtual scrolling with 300+ resources and sparse appointments
- Virtual scrolling with resource grouping and hierarchical organization
- Virtual scrolling combined with custom templates (ResourceHeaderTemplate, EventTemplate)
- Resource header templates with virtual scrolling for metadata display
- Event templates with virtual scrolling for custom event rendering
- Lazy loading appointments with EnableLazyLoading="true" property
- Lazy loading on-demand approach for viewport-based data retrieval
- Lazy loading with server-side appointment filtering by ResourceId
- Server-side controller implementation for lazy loading (ResourceId query params)
- Lazy loading parameters (StartDate, EndDate, ResourceId filtering)
- Virtual scrolling with DataManager for remote data binding
- Virtual scrolling and lazy loading combined for massive datasets
- Performance optimization with virtual scrolling (VirtualResourceCount tuning)
- Performance optimization with sparse data (not all resources have events daily)
- Performance optimization with EnableMaxHeight, AllowKeyboard settings
- CSS optimization for virtual scrolling (will-change property, min-height)
- Virtual scrolling limitations (not in Month/Year/MonthAgenda views)
- Virtual scrolling limitations (limited support in TimelineYear Vertical Orientation)
- When virtual scrolling is NOT beneficial (small datasets <100 resources)
- Combining virtual scrolling with MaxEventsPerRow for cell optimization
- Virtual scrolling with scroll-on-demand and automatic resource loading
- Memory management in virtual scrolling scenarios
- Testing virtual scrolling performance with actual large datasets
📄 阅读: references/virtual-scrolling.md
- 虚拟滚动概述和适用场景(100+资源、5000+预约)
- 在时间线视图(TimelineDay、TimelineWeek、TimelineWorkWeek、TimelineMonth、TimelineYear)中启用AllowVirtualScrolling
- 为大型即将到来的日程列表在议程视图中使用虚拟滚动
- 在带资源分组的时间线月视图中使用虚拟滚动
- 虚拟滚动的优势(减少内存占用、滚动流畅、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)
- 虚拟滚动的限制(不支持月视图/年视图/月议程视图)
- 虚拟滚动的限制(时间线年视图垂直方向支持有限)
- 虚拟滚动无优势的场景(小型数据集<100资源)
- 结合虚拟滚动与MaxEventsPerRow进行单元格优化
- 带按需滚动和自动资源加载的虚拟滚动
- 虚拟滚动场景下的内存管理
- 使用实际大型数据集测试虚拟滚动性能
State Persistence
状态持久化
📄 Read: references/state-persistence.md
- Persisted properties (view, date)
- Local storage integration
📄 阅读: references/state-persistence.md
- 持久化属性(视图、日期)
- 本地存储集成
Exporting and Importing
导出与导入
📄 Read: references/exporting.md
- Excel export to XLSX/CSV using ExportToExcelAsync
- Exporting with custom fields and field filtering
- Exporting recurring event occurrences as individual records (IncludeOccurrences)
- Exporting custom event data subset with CustomData option
- Customizing column headers with ExportFieldInfo
- Export with custom filename (FileName property)
- Excel file formats (XLSX vs CSV via ExportType)
- Export with specific date format (DateFormat option)
- Customize Excel sheet before export with OnExcelExporting event
- ExcelExport API for cell formatting, headers, styles
- ICS calendar export to .ics format (Outlook, Google Calendar compatible)
- ICS export with custom filename
- Importing events from external ICS files with ImportICalendarAsync
- File uploader integration for importing ICS files
- Merging imported events with existing appointments
- PrintAsync method without options (default print)
- PrintAsync method with PrintOptions (custom width/height)
- Print current view with all visible appointments
📄 阅读: references/exporting.md
- 使用ExportToExcelAsync导出为XLSX/CSV格式
- 带自定义字段和字段过滤的导出
- 将重复日程的出现作为单独记录导出(IncludeOccurrences)
- 使用CustomData选项导出自定义日程数据子集
- 使用ExportFieldInfo自定义列标题
- 带自定义文件名的导出(FileName属性)
- Excel文件格式(通过ExportType选择XLSX或CSV)
- 带特定日期格式的导出(DateFormat选项)
- 使用OnExcelExporting事件在导出前自定义Excel工作表
- 用于单元格格式化、标题、样式的ExcelExport API
- 导出为.ics格式的ICS日历(兼容Outlook、Google日历)
- 带自定义文件名的ICS导出
- 使用ImportICalendarAsync从外部ICS文件导入日程
- 集成文件上传器以导入ICS文件
- 将导入的日程与现有预约合并
- 无参数的PrintAsync方法(默认打印)
- 带PrintOptions的PrintAsync方法(自定义宽/高)
- 打印当前视图及所有可见预约
Dimensions
尺寸配置
📄 Read: references/dimensions.md
- Height and width configuration
- Responsive sizing
- Auto-height for rows
- Cell and column dimensions
- Container constraints
📄 阅读: references/dimensions.md
- 高度和宽度配置
- 响应式尺寸
- 行自动高度
- 单元格和列尺寸
- 容器约束
Row Auto Height
行自动高度
📄 Read: references/row-auto-height.md
- Enable/disable auto height
- Row height calculation
- Content overflow handling
- Responsive row sizing
📄 阅读: references/row-auto-height.md
- 启用/禁用自动高度
- 行高度计算
- 内容溢出处理
- 响应式行尺寸
Performance and WebAssembly
性能与WebAssembly
📄 Read: references/webassembly-performance.md
- Performance optimization techniques
- WebAssembly-specific considerations
- Large dataset optimization
- Memory management
- Rendering optimization
📄 阅读: references/webassembly-performance.md
- 性能优化技巧
- WebAssembly特定注意事项
- 大型数据集优化
- 内存管理
- 渲染优化
Accessibility
无障碍支持
📄 Read: references/accessibility.md
- WCAG 2.2 compliance
- Keyboard navigation shortcuts
- Screen reader support
- ARIA attributes
- Right-to-left (RTL) support
- Color contrast and accessibility standards
📄 阅读: references/accessibility.md
- WCAG 2.2合规性
- 键盘导航快捷键
- 屏幕阅读器支持
- ARIA属性
- 从右到左(RTL)支持
- 颜色对比度和无障碍标准
Quick Start Example
快速开始示例
cshtml
@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; }
}
}cshtml
@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; }
}
}Common Patterns
常见模式
1. CRUD Operations
1. CRUD操作
- Create: Use method or double-click cells for editor
AddEventAsync() - Read: Use or
GetEventsAsync()orGetCurrentViewEvents()GetBlockEventsAsync() - Update: Modify appointment and use
SaveEventAsync() - Delete: Use method or delete key for multi-select
DeleteEventAsync() - Check availability: Use to prevent overlaps
IsSlotAvailableAsync()
- 创建: 使用方法或双击单元格打开编辑器
AddEventAsync() - 读取: 使用或
GetEventsAsync()或GetCurrentViewEvents()GetBlockEventsAsync() - 更新: 修改预约并使用
SaveEventAsync() - 删除: 使用方法或按删除键进行多选删除
DeleteEventAsync() - 检查可用性: 使用阻止重叠
IsSlotAvailableAsync()
2. Appointment Management
2. 预约管理
- Readonly appointments: Set on individual events or use
IsReadonly = truepropertyReadonly - Block time slots: Set to prevent scheduling on those slots
IsBlock = true - Overlapping control: Use to prevent overlaps
AllowOverlap="false" - Custom fields: Add custom properties beyond built-in fields (Status, Priority, etc.)
- Field mapping: Use tags for custom field names
ScheduleField
- 只读预约: 在单个日程上设置或使用
IsReadonly = true属性Readonly - 阻止时间段: 设置以防止在这些时段进行调度
IsBlock = true - 重叠控制: 使用阻止重叠
AllowOverlap="false" - 自定义字段: 添加内置字段之外的自定义属性(Status、Priority等)
- 字段映射: 使用标签自定义字段名称
ScheduleField
3. Appearance Customization
3. 外观自定义
- Templates: Use for custom appointment HTML
<Template> - EventRendered: Apply dynamic CSS classes based on data
- CssClass: Apply predefined CSS classes from appointment data
- Tooltips: Enable with and customize with
EnableTooltip="true"TooltipTemplate - Cell styling: Use event or
OnRenderCellCellTemplate
- 模板: 使用自定义预约HTML
<Template> - EventRendered: 根据数据应用动态CSS类
- CssClass: 从预约数据应用预定义CSS类
- 工具提示: 使用启用,并通过
EnableTooltip="true"自定义TooltipTemplate - 单元格样式: 使用事件或
OnRenderCellCellTemplate
4. Event Handling
4. 事件处理
- ActionBegin: Intercept before operations (validate, cancel, check overlap)
- ActionCompleted: Execute after successful operations
- EventRendered: Customize appointment appearance
- OnDragStart / OnResizeStart: Control drag/resize behavior
- TooltipOpening: Conditionally show/hide tooltips
- ActionBegin: 在操作前拦截(验证、取消、检查重叠)
- ActionCompleted: 操作成功后执行
- EventRendered: 自定义预约外观
- OnDragStart / OnResizeStart: 控制拖放/调整行为
- TooltipOpening: 条件式显示/隐藏工具提示
5. View Management
5. 视图管理
- Set property to change active view
CurrentView - Configure each view independently with view-specific properties
- Use for custom view labels
DisplayName - Extend views with property (e.g., 3-day view)
Interval
- 设置属性更改活动视图
CurrentView - 使用视图特定属性独立配置每个视图
- 使用自定义视图标签
DisplayName - 使用属性扩展视图(例如3天视图)
Interval
6. Recurring Events
6. 重复日程
- Use standard iCalendar format (FREQ, INTERVAL, COUNT, UNTIL)
RecurrenceRule - Add dates to exclude occurrences
RecurrenceException - Use for edited occurrences
RecurrenceID - Support daily, weekly, monthly, yearly patterns with FREQ property
- 使用标准iCalendar 格式(FREQ、INTERVAL、COUNT、UNTIL)
RecurrenceRule - 添加日期以排除特定出现的日程
RecurrenceException - 使用标记编辑过的单次日程
RecurrenceID - 通过FREQ属性支持每日、每周、每月、每年的重复模式
7. Data Binding
7. 数据绑定
- Local: Bind to List<AppointmentData>
DataSource - Remote: Bind to HTTP service returning data
- Use property for server-side filtering
Query - Call to reload data without full refresh
RefreshEventsAsync()
- 本地:将绑定到List<AppointmentData>
DataSource - 远程:绑定到返回数据的HTTP服务
- 使用属性进行服务端过滤
Query - 调用重新加载数据,无需完全刷新
RefreshEventsAsync()
Key Props and Configuration
关键属性与配置
| Property | Purpose | Example |
|---|---|---|
| Scheduler height in pixels/percentage | |
| Scheduler width in pixels/percentage | |
| Active view (Day, Week, Month, etc.) | |
| Currently displayed date | |
| Enable/disable drag functionality | |
| Enable/disable resize functionality | |
| Allow dragging multiple appointments | |
| Prevent overlapping appointments | |
| Quick inline creation on cell click | |
| View-only mode (no CRUD) | |
| Minimum date boundary | |
| Maximum date boundary | |
| Custom CSS class for styling | |
| Appointments occupy full cell height | |
| Show indicator for multiple appointments | |
| Auto-adjust row heights for content | |
| 属性 | 用途 | 示例 |
|---|---|---|
| 设置Scheduler的高度(像素/百分比) | |
| 设置Scheduler的宽度(像素/百分比) | |
| 设置活动视图(日视图、周视图、月视图等) | |
| 设置当前显示的日期 | |
| 启用/禁用拖放功能 | |
| 启用/禁用调整功能 | |
| 允许多个预约拖放 | |
| 阻止重叠预约 | |
| 单击单元格快速内联创建预约 | |
| 设置只读模式(禁止CRUD操作) | |
| 设置最小日期边界 | |
| 设置最大日期边界 | |
| 设置自定义CSS类用于样式设置 | |
| 让预约占满单元格高度 | |
| 显示多日程指示器 | |
| 自动调整行高度以适应内容 | |
Common Use Cases
常见用例
- Employee Scheduling - Multiple resources with drag-drop and approval workflow
- Meeting Rooms Reservation - Resource-based booking with timezone support
- Doctor's Appointments - Recurring slots with patient blocking
- Project Task Management - Timeline views with progress tracking
- Educational Timetable - Multiple classes with resource grouping
- Shift Management - Working hours, shift patterns with recurrence
- Event Calendar - Public events with recurrence and filtering
- Field Service Dispatch - Mobile-friendly with offline support
Next Steps: Read the appropriate reference file based on your use case to understand specific features and implementation details.
- 员工调度 - 多资源支持拖放和审批流程
- 会议室预订 - 基于资源的预订,支持时区
- 医生预约 - 重复时段,支持患者阻止
- 项目任务管理 - 时间线视图,支持进度跟踪
- 教学时间表 - 多班级支持资源分组
- 班次管理 - 工作时间、重复班次模式
- 活动日历 - 公开活动,支持重复和过滤
- 现场服务调度 - 移动友好,支持离线
下一步: 根据您的用例阅读相应的参考文件,了解特定功能和实现细节。