syncfusion-aspnetcore-scheduler

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing ASP.NET Core Scheduler

实现ASP.NET Core Scheduler

The Syncfusion ASP.NET Core Scheduler is a comprehensive component for managing appointments, events, and schedules. It provides rich functionality for creating calendar-based applications with support for multiple views, resources, recurring events, and extensive customization options.

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

When to Use This Skill

何时使用此技能

Appointment Management: Creating, editing, and deleting calendar appointments
Multi-User Scheduling: Implementing resource scheduling for multiple users or resources
Calendar Views: Displaying events in day, week, month, timeline, or agenda formats
Recurring Events: Managing repeating appointments with complex recurrence rules
Data Integration: Binding local or remote data sources to the Scheduler
Custom Templates: Customizing event appearance and templates
Working Hours: Configuring business hours, working days, and timezones
Event Operations: Drag-and-drop rescheduling, resizing, and inline editing

预约管理： 创建、编辑和删除日历预约
多用户调度： 为多个用户或资源实现资源调度功能
日历视图： 以日、周、月、时间线或议程格式展示事件
重复事件： 管理带有复杂重复规则的周期性预约
数据集成： 将本地或远程数据源绑定到Scheduler
自定义模板： 自定义事件外观和模板
工作时间： 配置营业时间、工作日和时区
事件操作： 拖放重调度、大小调整和行内编辑

Documentation and Navigation Guide

文档和导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation and NuGet package setup
Adding Tag Helper and script resources
Registering Script Manager
Basic Scheduler initialization
Populating appointments and setting default date/view

📄 阅读： references/getting-started.md

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

Appointment Management

预约管理

📄 Read: references/appointments.md

Appointment data structure and field mapping
Creating normal, all-day, spanned, and recurring events
Appointment properties (Id, Subject, StartTime, EndTime, Location, Description)
Recurring appointments and recurrence rules
Exception handling for recurring events
Drag-and-drop and inline editing

📄 阅读： references/appointments.md

预约数据结构和字段映射
创建普通、全天、跨天和重复事件
预约属性（Id、Subject、StartTime、EndTime、Location、Description）
重复预约和重复规则
重复事件的异常处理
拖放和行内编辑

CRUD Operations

CRUD操作

📄 Read: references/crud-operations.md

Adding appointments (editor window, addEvent method, server-side insertion)
Editing appointments (saveEvent method, normal and recurring events)
Deleting appointments (deleteEvent method, handling series vs occurrences)
Handling conflicts and validation
Server-side database operations
Batch operations for multiple changes

📄 阅读： references/crud-operations.md

添加预约（编辑器窗口、addEvent方法、服务端插入）
编辑预约（saveEvent方法、普通和重复事件）
删除预约（deleteEvent方法、处理系列和单次事件）
冲突处理和校验
服务端数据库操作
多变更批量操作

Views and Configuration

视图和配置

📄 Read: references/views-and-modes.md

Available view types (Day, Week, WorkWeek, Month, Year, Agenda, MonthAgenda, Timeline views)
Setting currentView and switching between views
View-specific configurations using e-schedule-views
Customizing start/end hours, working days, timescales
Date format and weekend display settings

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

可用视图类型（Day、Week、WorkWeek、Month、Year、Agenda、MonthAgenda、Timeline视图）
设置currentView和视图切换
使用e-schedule-views配置视图专属参数
自定义开始/结束时间、工作日、时间刻度
日期格式和周末展示设置

Scheduling Features

调度功能

📄 Read: references/scheduling-features.md

Timescale configuration (interval and slot count)
Working days and business hours setup
Timezone support (IANA timezones)
Recurrence patterns (RFC 5545 format)
Resource configuration and grouping
Complete scheduling configuration example

📄 阅读： references/scheduling-features.md

时间刻度配置（间隔和槽位数）
工作日和营业时间设置
时区支持（IANA时区）
重复规则（RFC 5545格式）
资源配置和分组
完整调度配置示例

Data Binding

数据绑定

📄 Read: references/data-binding.md

Local data binding with DataSource
Remote data binding with ODataV4Adaptor
Custom adaptor creation
Query parameters and filters
AJAX data loading
CRUD action configuration with UrlAdaptor
Google Calendar integration

📄 阅读： references/data-binding.md

使用DataSource实现本地数据绑定
使用ODataV4Adaptor实现远程数据绑定
自定义适配器创建
查询参数和过滤器
AJAX数据加载
使用UrlAdaptor配置CRUD操作
Google Calendar集成

Customization and Templates

自定义和模板

📄 Read: references/customization.md

Event templates and cell templates
Event customization using eventRendered event
CSS class customization
Tooltip templates and display options
Custom editor window configuration
Overlapping event prevention

📄 阅读： references/customization.md

事件模板和单元格模板
使用eventRendered事件自定义事件
CSS类自定义
提示框模板和展示选项
自定义编辑器窗口配置
事件重叠预防

Advanced Features

高级功能

📄 Read: references/advanced-features.md

Resource grouping and multi-resource scheduling
Timezone support and conversion
Virtual scrolling for performance
State persistence
Exporting and printing
Localization and accessibility
Inline appointment editing
Read-only mode and appointment blocking

📄 阅读： references/advanced-features.md

资源分组和多资源调度
时区支持和转换
性能优化虚拟滚动
状态持久化
导出和打印
国际化和无障碍适配
行内预约编辑
只读模式和预约阻塞

Quick Start Example

快速开始示例

cshtml

<!-- _Layout.cshtml -->
<head>
    <!-- refer syncfusion theme -->
    <!-- refer syncfusion script -->
</head>
<body>
    <!-- Scheduler will render here -->
    <ejs-scripts></ejs-scripts>
</body>

<!-- Index.cshtml -->
@addTagHelper *, Syncfusion.EJ2

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

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

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

cshtml

<!-- _Layout.cshtml -->
<head>
    <!-- refer syncfusion theme -->
    <!-- refer syncfusion script -->
</head>
<body>
    <!-- Scheduler will render here -->
    <ejs-scripts></ejs-scripts>
</body>

<!-- Index.cshtml -->
@addTagHelper *, Syncfusion.EJ2

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

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

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

Common Patterns

常用模式

Adding Events Programmatically

编程方式添加事件

csharp

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

csharp

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

Handling CRUD Operations

处理CRUD操作

csharp

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

csharp

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

Creating Recurring Events

创建重复事件

csharp

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

csharp

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

Configuring Multiple Views

配置多视图

cshtml

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

cshtml

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

Key Properties and Events

核心属性和事件

Core Scheduler Properties

Scheduler核心属性

```
currentView
```
: Active view type (Day, Week, WorkWeek, Month, Year, Agenda, MonthAgenda, TimelineDay, TimelineWeek, TimelineWorkWeek, TimelineMonth, TimelineYear)
```
selectedDate
```
: Current date displayed on Scheduler
```
readonly
```
: Disables all CRUD operations when true
```
allowDragAndDrop
```
: Enables drag-and-drop (default: true)
```
allowResizing
```
: Enables event resizing (default: true)
```
allowMultiDrag
```
: Enables dragging multiple events simultaneously
```
allowInline
```
: Enables inline editing of event subject
```
allowOverlap
```
: Prevents overlapping events when false
```
height
```
and
```
width
```
: Dimension settings
```
cssClass
```
: Custom CSS class for styling

```
currentView
```
: 激活的视图类型（Day, Week, WorkWeek, Month, Year, Agenda, MonthAgenda, TimelineDay, TimelineWeek, TimelineWorkWeek, TimelineMonth, TimelineYear）
```
selectedDate
```
: Scheduler当前展示的日期
```
readonly
```
: 设为true时禁用所有CRUD操作
```
allowDragAndDrop
```
: 启用拖放功能（默认：true）
```
allowResizing
```
: 启用事件大小调整功能（默认：true）
```
allowMultiDrag
```
: 启用同时拖动多个事件功能
```
allowInline
```
: 启用事件标题行内编辑功能
```
allowOverlap
```
: 设为false时禁止事件重叠
```
height
```
和
```
width
```
: 尺寸设置
```
cssClass
```
: 用于样式自定义的CSS类

Event Settings Properties

事件设置属性

```
dataSource
```
: Binds appointment data (array or DataManager)
```
template
```
: Custom template for event display
```
enableTooltip
```
: Shows tooltip for appointments
```
tooltipTemplate
```
: Customizes tooltip content
```
enableMaxHeight
```
: Events occupy full cell height
```
enableIndicator
```
: Shows more indicator for multiple events
```
spannedEventPlacement
```
: AllDayRow or TimeSlot for multi-day events
```
sortComparer
```
: Custom sort function for overlapping events
```
editFollowingEvents
```
: Allows editing current and following recurring events

```
dataSource
```
: 绑定预约数据（数组或DataManager）
```
template
```
: 事件展示的自定义模板
```
enableTooltip
```
: 展示预约提示框
```
tooltipTemplate
```
: 自定义提示框内容
```
enableMaxHeight
```
: 事件占满单元格高度
```
enableIndicator
```
: 多事件时展示更多指示器
```
spannedEventPlacement
```
: 跨天事件展示位置（AllDayRow或TimeSlot）
```
sortComparer
```
: 重叠事件的自定义排序函数
```
editFollowingEvents
```
: 允许编辑当前及后续重复事件

Event Field Mapping

事件字段映射

```
id
```
: Unique appointment identifier (required)
```
subject
```
: Appointment title
```
startTime
```
: Start date/time (required)
```
endTime
```
: End date/time (required)
```
isAllDay
```
: All-day event flag
```
location
```
: Event location
```
description
```
: Event details
```
recurrenceRule
```
: Recurrence pattern (iCalendar format)
```
recurrenceID
```
: Parent recurring event ID for exceptions
```
recurrenceException
```
: Excluded dates from recurrence
```
followingID
```
: Parent event ID for "following events" edits
```
startTimezone
```
: Start time timezone (IANA timezone names)
```
endTimezone
```
: End time timezone
```
isReadonly
```
: Individual event read-only flag
```
isBlock
```
: Time slot blocking flag

```
id
```
: 唯一预约标识符（必填）
```
subject
```
: 预约标题
```
startTime
```
: 开始日期/时间（必填）
```
endTime
```
: 结束日期/时间（必填）
```
isAllDay
```
: 全天事件标记
```
location
```
: 事件地点
```
description
```
: 事件详情
```
recurrenceRule
```
: 重复规则（iCalendar格式）
```
recurrenceID
```
: 异常事件对应的父重复事件ID
```
recurrenceException
```
: 重复规则排除的日期
```
followingID
```
: "编辑后续事件"对应的父事件ID
```
startTimezone
```
: 开始时间时区（IANA时区名称）
```
endTimezone
```
: 结束时间时区
```
isReadonly
```
: 单个事件只读标记
```
isBlock
```
: 时间段阻塞标记

Important Events

重要事件

```
actionBegin
```
: Triggered before CRUD actions
```
actionComplete
```
: Triggered after CRUD actions complete
```
actionFailure
```
: Triggered on server errors
```
eventRendered
```
: Triggered before event rendering (customization)
```
dragStart
```
: Triggered when dragging begins
```
dragStop
```
: Triggered when dragging ends
```
resizeStart
```
: Triggered when resizing begins
```
popupOpen
```
: Triggered before editor window opens
```
tooltipOpen
```
: Triggered before tooltip displays
```
dataBound
```
: Triggered after data binding completes

```
actionBegin
```
: CRUD操作触发前执行
```
actionComplete
```
: CRUD操作完成后触发
```
actionFailure
```
: 服务端报错时触发
```
eventRendered
```
: 事件渲染前触发（用于自定义）
```
dragStart
```
: 拖动开始时触发
```
dragStop
```
: 拖动结束时触发
```
resizeStart
```
: 大小调整开始时触发
```
popupOpen
```
: 编辑器窗口打开前触发
```
tooltipOpen
```
: 提示框展示前触发
```
dataBound
```
: 数据绑定完成后触发

Public Methods

公共方法

```
addEvent(eventData)
```
: Add single or multiple appointments
```
saveEvent(eventData, action)
```
: Update existing appointments
```
deleteEvent(eventData, action)
```
: Delete appointments
```
getEvents()
```
: Retrieve all appointments
```
getCurrentViewEvents()
```
: Get appointments in current view
```
getEventDetails(element)
```
: Get event data from UI element
```
refreshEvents()
```
: Refresh appointments without full reload
```
navigateTo(date)
```
: Navigate to specific date
```
navigatePrevious()
```
: Go to previous time period
```
navigateNext()
```
: Go to next time period

isSlotAvailable(date, endDate, resourceId)

: Check slot availability

```
openOverlapAlert()
```
: Show overlap validation alert

```
addEvent(eventData)
```
: 添加单个或多个预约
```
saveEvent(eventData, action)
```
: 更新现有预约
```
deleteEvent(eventData, action)
```
: 删除预约
```
getEvents()
```
: 获取所有预约
```
getCurrentViewEvents()
```
: 获取当前视图内的预约
```
getEventDetails(element)
```
: 从UI元素获取事件数据
```
refreshEvents()
```
: 刷新预约无需全量重载
```
navigateTo(date)
```
: 跳转到指定日期
```
navigatePrevious()
```
: 跳转到上一个时间段
```
navigateNext()
```
: 跳转到下一个时间段

isSlotAvailable(date, endDate, resourceId)

: 检查时间段是否可用

```
openOverlapAlert()
```
: 展示重叠校验提示

syncfusion-aspnetcore-scheduler

Original

Translation

Implementing ASP.NET Core Scheduler

实现ASP.NET Core Scheduler

When to Use This Skill

何时使用此技能

Documentation and Navigation Guide

文档和导航指南

Getting Started

快速入门

Appointment Management

预约管理

CRUD Operations

CRUD操作

Views and Configuration

视图和配置

Scheduling Features

调度功能

Data Binding

数据绑定

Customization and Templates

自定义和模板

Advanced Features

高级功能

Quick Start Example

快速开始示例

Common Patterns

常用模式

Adding Events Programmatically

编程方式添加事件

Handling CRUD Operations

处理CRUD操作

Creating Recurring Events

创建重复事件

Configuring Multiple Views

配置多视图

Key Properties and Events

核心属性和事件

Core Scheduler Properties

Scheduler核心属性

Event Settings Properties

事件设置属性

Event Field Mapping

事件字段映射

Important Events

重要事件

Public Methods

公共方法

Related Skills

相关技能