syncfusion-angular-scheduler

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Scheduler

实现Syncfusion Angular Scheduler组件

A comprehensive guide for implementing the Syncfusion Angular Scheduler component for event and appointment management with multiple view modes, resource grouping, timezone support, and extensive customization options.

这是一份关于实现Syncfusion Angular Scheduler组件的综合指南，该组件用于事件和预约管理，支持多种视图模式、资源分组、时区处理以及丰富的自定义选项。

When to Use This Skill

何时使用本技能

Use this skill when you need to:

Event and Appointment Management: Create calendar applications with event scheduling, editing, and management
Resource Scheduling: Manage multiple resources (rooms, equipment, people) with grouping and filtering
Timeline Views: Display events in horizontal timeline format for project planning or resource allocation
Booking Systems: Build appointment booking interfaces for healthcare, salon, or meeting room management
Calendar Applications: Implement full-featured calendar systems with recurring events and reminders
Multi-Timezone Support: Handle events across different timezones for global teams
Work Hour Management: Configure working days, hours, and holidays for business applications

在以下场景中使用本技能：

事件与预约管理：创建具备事件调度、编辑和管理功能的日历应用
资源调度：通过分组和过滤管理多种资源（会议室、设备、人员）
时间线视图：以水平时间线格式展示事件，用于项目规划或资源分配
预订系统：为医疗、沙龙或会议室管理构建预约预订界面
日历应用：实现包含重复事件和提醒功能的全功能日历系统
多时区支持：为全球团队处理不同时区的事件
工作时间管理：为业务应用配置工作日、工作时长和节假日

Component Overview

组件概述

The Syncfusion Angular Scheduler (ejs-schedule) is a feature-rich calendar and event management component that provides:

11+ View Modes: Day, Week, WorkWeek, Month, Year, Agenda, MonthAgenda, Timeline variants
Event Types: Normal, spanned, all-day, and recurring events with complex recurrence patterns
Data Binding: Local and remote data with CRUD operations, DataManager integration
Resource Management: Single and multiple resource grouping with custom templates
Time Configuration: Customizable timescale, timezone support, working hours/days
Rich Customization: Cell templates, editor templates, event templates, custom styling
Advanced Features: Drag-drop, resize, clipboard operations, virtual scrolling, export (ICS/Excel/PDF)
Accessibility: WCAG 2.1 compliant with keyboard navigation and screen reader support
Localization: Multi-language and RTL support

Package:

@syncfusion/ej2-angular-schedule

Syncfusion Angular Scheduler（ejs-schedule）是一款功能丰富的日历和事件管理组件，提供以下特性：

11种以上视图模式：日视图、周视图、工作周视图、月视图、年视图、日程视图、月日程视图以及各类时间线视图
事件类型：常规事件、跨时段事件、全天事件，以及支持复杂重复规则的重复事件
数据绑定：本地和远程数据绑定，支持CRUD操作，集成DataManager
资源管理：单资源和多资源分组，支持自定义模板
时间配置：可自定义时间刻度、时区支持、工作时间/工作日设置
丰富自定义：单元格模板、编辑器模板、事件模板、自定义样式
高级功能：拖放、调整大小、剪贴板操作、虚拟滚动、导出（ICS/Excel/PDF）
可访问性：符合WCAG 2.1标准，支持键盘导航和屏幕阅读器
本地化：多语言和RTL（从右到左）布局支持

包名：

@syncfusion/ej2-angular-schedule

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Read this reference when you need to:

Install and set up the Angular Scheduler package
Configure module registration and view services (Day, Week, Month, Agenda, Timeline)
Create your first scheduler with basic configuration
Add CSS theme imports
Understand component initialization

📄 阅读：references/getting-started.md

在以下场景中阅读本参考文档：

安装和设置Angular Scheduler包
配置模块注册和视图服务（日、周、月、日程、时间线）
创建第一个基础配置的日程安排器
添加CSS主题导入
理解组件初始化流程

Views and Display Configuration

视图与显示配置

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

Read this reference when you need to:

Configure available view modes (Day, Week, WorkWeek, Month, Year, Agenda)
Set up Timeline views (TimelineDay, TimelineWeek, TimelineMonth, TimelineYear)
Switch between different views programmatically
Customize view-specific settings and intervals
Configure calendar mode and display options
Handle view navigation

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

在以下场景中阅读本参考文档：

配置可用的视图模式（日、周、工作周、月、年、日程）
设置时间线视图（时间线日、时间线周、时间线月、时间线年）
以编程方式切换不同视图
自定义视图特定的设置和时间间隔
配置日历模式和显示选项
处理视图导航

Events and Appointments

事件与预约

📄 Read: references/appointments.md

Read this reference when you need to:

Understand event types (normal, spanned, all-day, recurring)
Define event data structure and required fields
Create and render events programmatically
Configure event templates and custom rendering
Handle event interactions (click, double-click, hover)
Add custom fields to events

📄 阅读：references/appointments.md

在以下场景中阅读本参考文档：

理解事件类型（常规、跨时段、全天、重复）
定义事件数据结构和必填字段
以编程方式创建和渲染事件
配置事件模板和自定义渲染
处理事件交互（点击、双击、悬停）
为事件添加自定义字段

Data Binding and CRUD Operations

数据绑定与CRUD操作

📄 Read: references/data-binding.md

Read this reference when you need to:

Bind local data (arrays) to the scheduler
Connect to remote data sources (OData, Web API, REST services)
Use DataManager for advanced data operations
Configure field mapping for custom data structures
Implement CRUD operations (Create, Read, Update, Delete)
Handle data adapters and custom queries

📄 阅读：references/data-binding.md

在以下场景中阅读本参考文档：

将本地数据（数组）绑定到日程安排器
连接到远程数据源（OData、Web API、REST服务）
使用DataManager进行高级数据操作
为自定义数据结构配置字段映射
实现CRUD操作（创建、读取、更新、删除）
处理数据适配器和自定义查询

Resources and Grouping

资源与分组

📄 Read: references/resources.md

Read this reference when you need to:

Configure single or multiple resources (rooms, employees, equipment)
Set up resource grouping (by date or by resource)
Customize resource colors and styling
Create resource templates
Filter and manage resource visibility
Handle resource-based events

📄 阅读：references/resources.md

在以下场景中阅读本参考文档：

配置单资源或多资源（会议室、员工、设备）
设置资源分组（按日期或按资源）
自定义资源颜色和样式
创建资源模板
过滤和管理资源可见性
处理基于资源的事件

Time Configuration

时间配置

📄 Read: references/time-configuration.md

Read this reference when you need to:

Configure timescale intervals and time slots
Set start and end hours for day views
Define working days and working hours
Handle timezone support and conversions
Manage multiple timezones
Customize time formats and display

📄 阅读：references/time-configuration.md

在以下场景中阅读本参考文档：

配置时间刻度间隔和时间段
设置日视图的开始和结束时间
定义工作日和工作时长
处理时区支持和转换
管理多时区
自定义时间格式和显示

Editor Customization

编辑器自定义

📄 Read: references/editor-customization.md

Read this reference when you need to:

Customize the event editor dialog
Create custom editor templates
Add custom fields to the editor
Configure editor validation rules
Customize quick info popups
Handle editor events

📄 阅读：references/editor-customization.md

在以下场景中阅读本参考文档：

自定义事件编辑器对话框
创建自定义编辑器模板
为编辑器添加自定义字段
配置编辑器验证规则
自定义快速信息弹窗
处理编辑器事件

Cell Customization

单元格自定义

📄 Read: references/cell-customization.md

Read this reference when you need to:

Create cell templates for custom rendering
Customize date header templates
Style time cells and work cells
Configure month cell templates
Create resource header templates
Add custom content to cells

📄 阅读：references/cell-customization.md

在以下场景中阅读本参考文档：

创建单元格模板以实现自定义渲染
自定义日期标题模板
为时间单元格和工作单元格设置样式
配置月视图单元格模板
创建资源标题模板
为单元格添加自定义内容

Recurrence Editor

重复事件编辑器

📄 Read: references/recurrence-editor.md

Read this reference when you need to:

Understand recurrence rule format (RRULE)
Configure recurrence patterns (Daily, Weekly, Monthly, Yearly)
Use the standalone recurrence editor component
Handle FREQ, INTERVAL, BYDAY, BYMONTHDAY parameters
Manage exception dates (EXDATE)
Edit recurring event series or single occurrences

📄 阅读：references/recurrence-editor.md

在以下场景中阅读本参考文档：

理解重复规则格式（RRULE）
配置重复模式（每日、每周、每月、每年）
使用独立的重复事件编辑器组件
处理FREQ、INTERVAL、BYDAY、BYMONTHDAY参数
管理例外日期（EXDATE）
编辑重复事件系列或单个实例

Header Customization

头部自定义

📄 Read: references/header-customization.md

Read this reference when you need to:

Customize the header toolbar
Add or remove toolbar items
Create custom toolbar buttons
Configure header rows
Customize date range display
Handle header events

📄 阅读：references/header-customization.md

在以下场景中阅读本参考文档：

自定义头部工具栏
添加或移除工具栏项
创建自定义工具栏按钮
配置头部行
自定义日期范围显示
处理头部事件

Clipboard Operations

剪贴板操作

📄 Read: references/clipboard-operations.md

Read this reference when you need to:

Enable copy (Ctrl+C), cut (Ctrl+X), paste (Ctrl+V) operations
Configure clipboard settings
Create custom clipboard actions
Handle clipboard events

📄 阅读：references/clipboard-operations.md

在以下场景中阅读本参考文档：

启用复制（Ctrl+C）、剪切（Ctrl+X）、粘贴（Ctrl+V）操作
配置剪贴板设置
创建自定义剪贴板操作
处理剪贴板事件

Exporting and Printing

导出与打印

📄 Read: references/exporting.md

Read this reference when you need to:

Export events to ICS/iCal format
Export scheduler to Excel
Export scheduler to PDF
Configure export options
Implement print functionality

📄 阅读：references/exporting.md

在以下场景中阅读本参考文档：

将事件导出为ICS/iCal格式
将日程安排器导出为Excel
将日程安排器导出为PDF
配置导出选项
实现打印功能

Styling and Themes

样式与主题

📄 Read: references/styling-themes.md

Read this reference when you need to:

Apply built-in themes (Material, Bootstrap, Fabric, etc.)
Customize component styling with CSS
Configure custom event colors
Style cells and views
Create responsive designs

📄 阅读：references/styling-themes.md

在以下场景中阅读本参考文档：

应用内置主题（Material、Bootstrap、Fabric等）
使用CSS自定义组件样式
配置自定义事件颜色
为单元格和视图设置样式
创建响应式设计

Advanced Features

高级功能

📄 Read: references/advanced-features.md

Read this reference when you need to:

Enable virtual scrolling for large datasets
Configure lazy loading
Set component dimensions (height, width)
Enable row auto-height
Handle drag-and-drop operations
Resize events
Manage multiple scheduler instances

📄 阅读：references/advanced-features.md

在以下场景中阅读本参考文档：

为大型数据集启用虚拟滚动
配置懒加载
设置组件尺寸（高度、宽度）
启用行自动高度
处理拖放操作
调整事件大小
管理多个日程安排器实例

State Persistence

状态持久化

📄 Read: references/state-persistence.md

Read this reference when you need to:

Enable state persistence
Configure which properties to persist
Use localStorage integration
Restore previous state
Clear persisted state

📄 阅读：references/state-persistence.md

在以下场景中阅读本参考文档：

启用状态持久化
配置需要持久化的属性
集成localStorage
恢复之前的状态
清除持久化状态

Accessibility

可访问性

📄 Read: references/accessibility.md

Read this reference when you need to:

Implement WCAG 2.1 compliance
Configure keyboard navigation
Set up ARIA attributes
Support screen readers
Manage focus states
Use high contrast themes

📄 阅读：references/accessibility.md

在以下场景中阅读本参考文档：

实现WCAG 2.1合规性
配置键盘导航
设置ARIA属性
支持屏幕阅读器
管理焦点状态
使用高对比度主题

Localization and Internationalization

本地化与国际化

📄 Read: references/localization.md

Read this reference when you need to:

Set up multi-language support
Load culture files
Enable RTL (Right-to-Left) support
Customize date/time formatting
Create custom localizations

📄 阅读：references/localization.md

在以下场景中阅读本参考文档：

设置多语言支持
加载文化文件
启用RTL（从右到左）支持
自定义日期/时间格式
创建自定义本地化

Quick Start Example

快速入门示例

Here's a minimal working example to get started with the Angular Scheduler:

typescript

import { Component } from '@angular/core';
import { ScheduleModule, EventSettingsModel, View } from '@syncfusion/ej2-angular-schedule';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule],
  providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService],
  template: `
    <ejs-schedule 
      width='100%' 
      height='550px'
      [selectedDate]="selectedDate"
      [eventSettings]="eventSettings">
    </ejs-schedule>
  `
})
export class AppComponent {
  public selectedDate: Date = new Date(2024, 0, 15);
  public eventSettings: EventSettingsModel = {
    dataSource: [
      {
        Id: 1,
        Subject: 'Team Meeting',
        StartTime: new Date(2024, 0, 15, 10, 0),
        EndTime: new Date(2024, 0, 15, 11, 30)
      },
      {
        Id: 2,
        Subject: 'Project Review',
        StartTime: new Date(2024, 0, 15, 14, 0),
        EndTime: new Date(2024, 0, 15, 15, 30)
      }
    ]
  };
}

CSS Import (in styles.css):

css

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-schedule/styles/material3.css';

以下是一个用于快速开始的最小可运行示例：

typescript

import { Component } from '@angular/core';
import { ScheduleModule, EventSettingsModel, View } from '@syncfusion/ej2-angular-schedule';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule],
  providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService],
  template: `
    <ejs-schedule 
      width='100%' 
      height='550px'
      [selectedDate]="selectedDate"
      [eventSettings]="eventSettings">
    </ejs-schedule>
  `
})
export class AppComponent {
  public selectedDate: Date = new Date(2024, 0, 15);
  public eventSettings: EventSettingsModel = {
    dataSource: [
      {
        Id: 1,
        Subject: 'Team Meeting',
        StartTime: new Date(2024, 0, 15, 10, 0),
        EndTime: new Date(2024, 0, 15, 11, 30)
      },
      {
        Id: 2,
        Subject: 'Project Review',
        StartTime: new Date(2024, 0, 15, 14, 0),
        EndTime: new Date(2024, 0, 15, 15, 30)
      }
    ]
  };
}

CSS导入（在styles.css中）：

css

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-schedule/styles/material3.css';

Common Patterns

常见模式

Pattern 1: Scheduler with Multiple Views

模式1：多视图日程安排器

typescript

import { Component } from '@angular/core';
import { ScheduleModule, View } from '@syncfusion/ej2-angular-schedule';
import { DayService, WeekService, MonthService, TimelineViewsService, TimelineMonthService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule],
  providers: [DayService, WeekService, MonthService, TimelineViewsService, TimelineMonthService],
  template: `
    <ejs-schedule 
      width='100%' 
      height='550px'
      [currentView]="currentView"
      [views]="views"
      [eventSettings]="eventSettings">
    </ejs-schedule>
  `
})
export class AppComponent {
  public currentView: View = 'Week';
  public views: View[] = ['Day', 'Week', 'Month', 'TimelineWeek', 'TimelineMonth'];
  public eventSettings: object = { dataSource: [] };
}

typescript

import { Component } from '@angular/core';
import { ScheduleModule, View } from '@syncfusion/ej2-angular-schedule';
import { DayService, WeekService, MonthService, TimelineViewsService, TimelineMonthService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule],
  providers: [DayService, WeekService, MonthService, TimelineViewsService, TimelineMonthService],
  template: `
    <ejs-schedule 
      width='100%' 
      height='550px'
      [currentView]="currentView"
      [views]="views"
      [eventSettings]="eventSettings">
    </ejs-schedule>
  `
})
export class AppComponent {
  public currentView: View = 'Week';
  public views: View[] = ['Day', 'Week', 'Month', 'TimelineWeek', 'TimelineMonth'];
  public eventSettings: object = { dataSource: [] };
}

Pattern 2: Scheduler with Resources

模式2：带资源的日程安排器

typescript

import { Component } from '@angular/core';
import { ScheduleModule, EventSettingsModel, GroupModel } from '@syncfusion/ej2-angular-schedule';
import { WeekService, MonthService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule],
  providers: [WeekService, MonthService],
  template: `
    <ejs-schedule 
      width='100%' 
      height='550px'
      [group]="group"
      [eventSettings]="eventSettings">
      <e-resources>
        <e-resource 
          field='RoomId' 
          title='Room' 
          name='Rooms' 
          [dataSource]='roomDataSource'
          textField='RoomText' 
          idField='Id' 
          colorField='RoomColor'>
        </e-resource>
      </e-resources>
    </ejs-schedule>
  `
})
export class AppComponent {
  public group: GroupModel = { resources: ['Rooms'] };
  
  public roomDataSource: object[] = [
    { RoomText: 'Room 1', Id: 1, RoomColor: '#cb6bb2' },
    { RoomText: 'Room 2', Id: 2, RoomColor: '#56ca85' }
  ];

  public eventSettings: EventSettingsModel = {
    dataSource: [
      {
        Id: 1,
        Subject: 'Meeting',
        StartTime: new Date(2024, 0, 15, 10, 0),
        EndTime: new Date(2024, 0, 15, 11, 0),
        RoomId: 1
      }
    ]
  };
}

typescript

import { Component } from '@angular/core';
import { ScheduleModule, EventSettingsModel, GroupModel } from '@syncfusion/ej2-angular-schedule';
import { WeekService, MonthService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule],
  providers: [WeekService, MonthService],
  template: `
    <ejs-schedule 
      width='100%' 
      height='550px'
      [group]="group"
      [eventSettings]="eventSettings">
      <e-resources>
        <e-resource 
          field='RoomId' 
          title='Room' 
          name='Rooms' 
          [dataSource]='roomDataSource'
          textField='RoomText' 
          idField='Id' 
          colorField='RoomColor'>
        </e-resource>
      </e-resources>
    </ejs-schedule>
  `
})
export class AppComponent {
  public group: GroupModel = { resources: ['Rooms'] };
  
  public roomDataSource: object[] = [
    { RoomText: 'Room 1', Id: 1, RoomColor: '#cb6bb2' },
    { RoomText: 'Room 2', Id: 2, RoomColor: '#56ca85' }
  ];

  public eventSettings: EventSettingsModel = {
    dataSource: [
      {
        Id: 1,
        Subject: 'Meeting',
        StartTime: new Date(2024, 0, 15, 10, 0),
        EndTime: new Date(2024, 0, 15, 11, 0),
        RoomId: 1
      }
    ]
  };
}

Pattern 3: Remote Data Binding

模式3：远程数据绑定

typescript

import { Component } from '@angular/core';
import { ScheduleModule, EventSettingsModel } from '@syncfusion/ej2-angular-schedule';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { WeekService, MonthService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule],
  providers: [WeekService, MonthService],
  template: `
    <ejs-schedule 
      width='100%' 
      height='550px'
      [eventSettings]="eventSettings">
    </ejs-schedule>
  `
})
export class AppComponent {
  private dataManager: DataManager = new DataManager({
    url: 'https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData',
    adaptor: new WebApiAdaptor(),
    crossDomain: true
  });

  public eventSettings: EventSettingsModel = {
    dataSource: this.dataManager
  };
}

typescript

import { Component } from '@angular/core';
import { ScheduleModule, EventSettingsModel } from '@syncfusion/ej2-angular-schedule';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { WeekService, MonthService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule],
  providers: [WeekService, MonthService],
  template: `
    <ejs-schedule 
      width='100%' 
      height='550px'
      [eventSettings]="eventSettings">
    </ejs-schedule>
  `
})
export class AppComponent {
  private dataManager: DataManager = new DataManager({
    url: 'https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData',
    adaptor: new WebApiAdaptor(),
    crossDomain: true
  });

  public eventSettings: EventSettingsModel = {
    dataSource: this.dataManager
  };
}

Pattern 4: Recurring Events

模式4：重复事件

typescript

import { Component } from '@angular/core';
import { ScheduleModule, EventSettingsModel } from '@syncfusion/ej2-angular-schedule';
import { WeekService, MonthService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule],
  providers: [WeekService, MonthService],
  template: `
    <ejs-schedule 
      width='100%' 
      height='550px'
      [eventSettings]="eventSettings">
    </ejs-schedule>
  `
})
export class AppComponent {
  public eventSettings: EventSettingsModel = {
    dataSource: [
      {
        Id: 1,
        Subject: 'Daily Standup',
        StartTime: new Date(2024, 0, 15, 9, 0),
        EndTime: new Date(2024, 0, 15, 9, 30),
        RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=10' // Repeats daily for 10 days
      },
      {
        Id: 2,
        Subject: 'Weekly Review',
        StartTime: new Date(2024, 0, 15, 14, 0),
        EndTime: new Date(2024, 0, 15, 15, 0),
        RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO;INTERVAL=1' // Every Monday
      }
    ]
  };
}

typescript

import { Component } from '@angular/core';
import { ScheduleModule, EventSettingsModel } from '@syncfusion/ej2-angular-schedule';
import { WeekService, MonthService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule],
  providers: [WeekService, MonthService],
  template: `
    <ejs-schedule 
      width='100%' 
      height='550px'
      [eventSettings]="eventSettings">
    </ejs-schedule>
  `
})
export class AppComponent {
  public eventSettings: EventSettingsModel = {
    dataSource: [
      {
        Id: 1,
        Subject: 'Daily Standup',
        StartTime: new Date(2024, 0, 15, 9, 0),
        EndTime: new Date(2024, 0, 15, 9, 30),
        RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=10' // 每日重复，共10天
      },
      {
        Id: 2,
        Subject: 'Weekly Review',
        StartTime: new Date(2024, 0, 15, 14, 0),
        EndTime: new Date(2024, 0, 15, 15, 0),
        RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO;INTERVAL=1' // 每周一重复
      }
    ]
  };
}

Key Configuration Options

关键配置选项

Core Properties

核心属性

Property	Type	Description
`currentView`	View	Active view mode (Day, Week, Month, etc.)
`selectedDate`	Date	Currently selected date
`eventSettings`	EventSettingsModel	Event data source and field mappings
`views`	View[]	Array of views to display in the scheduler
`height`	string	Scheduler height (e.g., '550px', '100%')
`width`	string	Scheduler width (e.g., '100%', '800px')

属性	类型	描述
`currentView`	View	当前激活的视图模式（日、周、月等）
`selectedDate`	Date	当前选中的日期
`eventSettings`	EventSettingsModel	事件数据源和字段映射
`views`	View[]	日程安排器中要显示的视图数组
`height`	string	日程安排器高度（例如：'550px'、'100%'）
`width`	string	日程安排器宽度（例如：'100%'、'800px'）

Event Settings

事件设置

Property	Type	Description
`dataSource`	object[] \| DataManager	Event data source
`fields`	FieldModel	Field mapping for custom data structure
`enableTooltip`	boolean	Enable event tooltips
`template`	string	Custom event template

属性	类型	描述
`dataSource`	object[] \| DataManager	事件数据源
`fields`	FieldModel	自定义数据结构的字段映射
`enableTooltip`	boolean	启用事件提示框
`template`	string	自定义事件模板

View Services (Must inject in providers)

视图服务（必须在providers中注入）

```
DayService
```
- Day view
```
WeekService
```
- Week view
```
WorkWeekService
```
- Work week view
```
MonthService
```
- Month view
```
YearService
```
- Year view
```
AgendaService
```
- Agenda view
```
MonthAgendaService
```
- Month agenda view
```
TimelineViewsService
```
- Timeline day, week, work week views
```
TimelineMonthService
```
- Timeline month view
```
TimelineYearService
```
- Timeline year view

```
DayService
```
- 日视图
```
WeekService
```
- 周视图
```
WorkWeekService
```
- 工作周视图
```
MonthService
```
- 月视图
```
YearService
```
- 年视图
```
AgendaService
```
- 日程视图
```
MonthAgendaService
```
- 月日程视图
```
TimelineViewsService
```
- 时间线日、周、工作周视图
```
TimelineMonthService
```
- 时间线月视图
```
TimelineYearService
```
- 时间线年视图

Common Events

常见事件

Event	Description
`eventClick`	Triggered when an event is clicked
`cellClick`	Triggered when a cell is clicked
`cellDoubleClick`	Triggered when a cell is double-clicked
`popupOpen`	Triggered before editor/quick info popup opens
`actionBegin`	Triggered before CRUD operations
`actionComplete`	Triggered after CRUD operations
`dataBinding`	Triggered before data binding
`dataBound`	Triggered after data binding

事件	描述
`eventClick`	点击事件时触发
`cellClick`	点击单元格时触发
`cellDoubleClick`	双击单元格时触发
`popupOpen`	编辑器/快速信息弹窗打开前触发
`actionBegin`	CRUD操作执行前触发
`actionComplete`	CRUD操作完成后触发
`dataBinding`	数据绑定前触发
`dataBound`	数据绑定完成后触发

Common Use Cases

常见用例

1. Appointment Booking System

1. 预约预订系统

Create a booking interface for healthcare, salons, or services with resource management, time slots, and availability checking.

Read: getting-started.md, resources.md, time-configuration.md

为医疗、沙龙或服务行业创建预订界面，包含资源管理、时间段和可用性检查。

阅读：getting-started.md, resources.md, time-configuration.md

2. Meeting Room Scheduler

2. 会议室调度器

Manage multiple meeting rooms with resource grouping, conflict detection, and availability display.

Read: resources.md, appointments.md, data-binding.md

管理多个会议室，支持资源分组、冲突检测和可用性展示。

阅读：resources.md, appointments.md, data-binding.md

3. Project Timeline

3. 项目时间线

Display project tasks in timeline views with drag-drop, resize, and milestone tracking.

Read: views-and-display.md, advanced-features.md, appointments.md

以时间线视图展示项目任务，支持拖放、调整大小和里程碑跟踪。

阅读：views-and-display.md, advanced-features.md, appointments.md

4. Team Calendar

4. 团队日历

Create a shared team calendar with recurring events, multiple timezones, and resource filtering.

Read: appointments.md, recurrence-editor.md, time-configuration.md, resources.md

创建共享团队日历，支持重复事件、多时区和资源过滤。

阅读：appointments.md, recurrence-editor.md, time-configuration.md, resources.md

5. Employee Shift Planning

5. 员工排班规划

Plan and manage employee shifts with working hours, multiple resources, and timeline views.

Read: time-configuration.md, resources.md, views-and-display.md

规划和管理员工班次，支持工作时间、多资源和时间线视图。

阅读：time-configuration.md, resources.md, views-and-display.md

6. Event Management Portal

6. 事件管理门户

Build event management systems with export to calendar apps (ICS), custom editor forms, and templates.

Read: appointments.md, editor-customization.md, exporting.md

构建事件管理系统，支持导出到日历应用（ICS）、自定义编辑器表单和模板。

阅读：appointments.md, editor-customization.md, exporting.md

7. Multi-Timezone Calendar

7. 多时区日历

Handle events across different timezones for global teams with timezone conversion and display.

Read: time-configuration.md, appointments.md

为全球团队处理不同时区的事件，支持时区转换和显示。

阅读：time-configuration.md, appointments.md

8. Custom Calendar Application

8. 自定义日历应用

Create fully customized calendar applications with custom cells, templates, and styling.

Read: cell-customization.md, editor-customization.md, styling-themes.md

创建完全自定义的日历应用，包含自定义单元格、模板和样式。

阅读：cell-customization.md, editor-customization.md, styling-themes.md