syncfusion-blazor-scheduler

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Syncfusion 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
    AddEventAsync()
    method or double-click cells for editor
  • Read: Use
    GetEventsAsync()
    or
    GetCurrentViewEvents()
    or
    GetBlockEventsAsync()
  • Update: Modify appointment and use
    SaveEventAsync()
  • Delete: Use
    DeleteEventAsync()
    method or delete key for multi-select
  • Check availability: Use
    IsSlotAvailableAsync()
    to prevent overlaps
  • 创建: 使用
    AddEventAsync()
    方法或双击单元格打开编辑器
  • 读取: 使用
    GetEventsAsync()
    GetCurrentViewEvents()
    GetBlockEventsAsync()
  • 更新: 修改预约并使用
    SaveEventAsync()
  • 删除: 使用
    DeleteEventAsync()
    方法或按删除键进行多选删除
  • 检查可用性: 使用
    IsSlotAvailableAsync()
    阻止重叠

2. Appointment Management

2. 预约管理

  • Readonly appointments: Set
    IsReadonly = true
    on individual events or use
    Readonly
    property
  • Block time slots: Set
    IsBlock = true
    to prevent scheduling on those slots
  • Overlapping control: Use
    AllowOverlap="false"
    to prevent overlaps
  • Custom fields: Add custom properties beyond built-in fields (Status, Priority, etc.)
  • Field mapping: Use
    ScheduleField
    tags for custom field names
  • 只读预约: 在单个日程上设置
    IsReadonly = true
    或使用
    Readonly
    属性
  • 阻止时间段: 设置
    IsBlock = true
    以防止在这些时段进行调度
  • 重叠控制: 使用
    AllowOverlap="false"
    阻止重叠
  • 自定义字段: 添加内置字段之外的自定义属性(Status、Priority等)
  • 字段映射: 使用
    ScheduleField
    标签自定义字段名称

3. Appearance Customization

3. 外观自定义

  • Templates: Use
    <Template>
    for custom appointment HTML
  • EventRendered: Apply dynamic CSS classes based on data
  • CssClass: Apply predefined CSS classes from appointment data
  • Tooltips: Enable with
    EnableTooltip="true"
    and customize with
    TooltipTemplate
  • Cell styling: Use
    OnRenderCell
    event or
    CellTemplate
  • 模板: 使用
    <Template>
    自定义预约HTML
  • EventRendered: 根据数据应用动态CSS类
  • CssClass: 从预约数据应用预定义CSS类
  • 工具提示: 使用
    EnableTooltip="true"
    启用,并通过
    TooltipTemplate
    自定义
  • 单元格样式: 使用
    OnRenderCell
    事件或
    CellTemplate

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
    CurrentView
    property to change active view
  • Configure each view independently with view-specific properties
  • Use
    DisplayName
    for custom view labels
  • Extend views with
    Interval
    property (e.g., 3-day view)
  • 设置
    CurrentView
    属性更改活动视图
  • 使用视图特定属性独立配置每个视图
  • 使用
    DisplayName
    自定义视图标签
  • 使用
    Interval
    属性扩展视图(例如3天视图)

6. Recurring Events

6. 重复日程

  • Use standard iCalendar
    RecurrenceRule
    format (FREQ, INTERVAL, COUNT, UNTIL)
  • Add
    RecurrenceException
    dates to exclude occurrences
  • Use
    RecurrenceID
    for edited occurrences
  • Support daily, weekly, monthly, yearly patterns with FREQ property
  • 使用标准iCalendar
    RecurrenceRule
    格式(FREQ、INTERVAL、COUNT、UNTIL)
  • 添加
    RecurrenceException
    日期以排除特定出现的日程
  • 使用
    RecurrenceID
    标记编辑过的单次日程
  • 通过FREQ属性支持每日、每周、每月、每年的重复模式

7. Data Binding

7. 数据绑定

  • Local: Bind
    DataSource
    to List<AppointmentData>
  • Remote: Bind to HTTP service returning data
  • Use
    Query
    property for server-side filtering
  • Call
    RefreshEventsAsync()
    to reload data without full refresh

  • 本地:将
    DataSource
    绑定到List<AppointmentData>
  • 远程:绑定到返回数据的HTTP服务
  • 使用
    Query
    属性进行服务端过滤
  • 调用
    RefreshEventsAsync()
    重新加载数据,无需完全刷新

Key Props and Configuration

关键属性与配置

PropertyPurposeExample
Height
Scheduler height in pixels/percentage
Height="650px"
Width
Scheduler width in pixels/percentage
Width="100%"
CurrentView
Active view (Day, Week, Month, etc.)
CurrentView="View.Week"
SelectedDate
Currently displayed date
@bind-SelectedDate="@date"
AllowDragAndDrop
Enable/disable drag functionality
AllowDragAndDrop="true"
AllowResizing
Enable/disable resize functionality
AllowResizing="true"
AllowMultiDrag
Allow dragging multiple appointments
AllowMultiDrag="true"
AllowOverlap
Prevent overlapping appointments
AllowOverlap="false"
AllowInline
Quick inline creation on cell click
AllowInline="true"
Readonly
View-only mode (no CRUD)
Readonly="true"
MinDate
Minimum date boundary
MinDate="new DateTime(2026,1,1)"
MaxDate
Maximum date boundary
MaxDate="new DateTime(2026,12,31)"
CssClass
Custom CSS class for styling
CssClass="custom-scheduler"
EnableMaxHeight
Appointments occupy full cell height
EnableMaxHeight="true"
EnableIndicator
Show indicator for multiple appointments
EnableIndicator="true"
EnableAutoRowHeight
Auto-adjust row heights for content
EnableAutoRowHeight="true"

属性用途示例
Height
设置Scheduler的高度(像素/百分比)
Height="650px"
Width
设置Scheduler的宽度(像素/百分比)
Width="100%"
CurrentView
设置活动视图(日视图、周视图、月视图等)
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"

Common Use Cases

常见用例

  1. Employee Scheduling - Multiple resources with drag-drop and approval workflow
  2. Meeting Rooms Reservation - Resource-based booking with timezone support
  3. Doctor's Appointments - Recurring slots with patient blocking
  4. Project Task Management - Timeline views with progress tracking
  5. Educational Timetable - Multiple classes with resource grouping
  6. Shift Management - Working hours, shift patterns with recurrence
  7. Event Calendar - Public events with recurrence and filtering
  8. 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.
  1. 员工调度 - 多资源支持拖放和审批流程
  2. 会议室预订 - 基于资源的预订,支持时区
  3. 医生预约 - 重复时段,支持患者阻止
  4. 项目任务管理 - 时间线视图,支持进度跟踪
  5. 教学时间表 - 多班级支持资源分组
  6. 班次管理 - 工作时间、重复班次模式
  7. 活动日历 - 公开活动,支持重复和过滤
  8. 现场服务调度 - 移动友好,支持离线

下一步: 根据您的用例阅读相应的参考文件,了解特定功能和实现细节。