syncfusion-angular-scheduler

实现 Syncfusion Angular Scheduler

全面介绍如何实现 Syncfusion Angular Scheduler 组件，用于事件和预约管理，并支持多种视图模式、资源分组、时区以及丰富的自定义选项。

何时使用此技能

在以下情况下使用此技能：

• 事件和预约管理：创建支持事件排期、编辑和管理的日历应用
• 资源排期：管理多个资源（房间、设备、人员），并支持分组和筛选
• 时间线视图：以水平时间线格式显示事件，用于项目规划或资源分配
• 预订系统：构建用于医疗保健、美容沙龙或会议室管理的预约预订界面
• 日历应用：实现功能齐全的日历系统，支持重复事件和提醒
• 多时区支持：处理不同全球时区中的事件
• 工作时间管理：为业务应用配置工作日、工作时间和节假日

组件概览

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

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

软件包：@syncfusion/ej2-angular-schedule

文档和导航指南

快速入门

📄 阅读： references/getting-started.md

在以下情况下阅读此参考资料：

• 安装和设置 Angular Scheduler 软件包
• 配置模块注册和视图服务（日、周、月、日程、时间线）
• 使用基本配置创建首个 Scheduler
• 通过 npm 主题软件包安装主题软件包并导入 CSS
• 了解组件初始化

视图和显示配置

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

在以下情况下阅读此参考资料：

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

日历模式和事件显示

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

在以下情况下阅读此参考资料：

• 配置公历或伊斯兰历模式
• 使用 maxEventStack 限制重叠事件
• 查看视图配置最佳实践和常见问题

事件和预约

📄 阅读： references/appointments.md

在以下情况下阅读此参考资料：

• 了解事件类型（普通、跨日、全天、重复）
• 定义事件数据结构和必填字段
• 以编程方式创建和呈现事件
• 处理事件交互（单击、双击、悬停）
• 为事件添加自定义字段

事件模板和工具提示

📄 阅读： references/appointment-templates.md

在以下情况下阅读此参考文档：

• 配置事件模板和自定义渲染
• 配置事件工具提示模板，以显示丰富的悬停内容
• 查看预约最佳实践和常见问题

数据绑定和 CRUD 操作

📄 阅读： references/data-binding.md

在以下情况下阅读此参考文档：

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

资源和分组

📄 阅读： references/resources.md

在以下情况下阅读此参考文档：

• 配置单个或多个资源（房间、员工、设备）
• 设置资源分组（按日期或按资源）
• 自定义资源颜色和样式
• 创建资源模板
• 筛选和管理资源可见性
• 处理基于资源的事件

高级资源管理

📄 阅读： references/resources-advanced.md

在以下情况下阅读此参考文档：

• 动态添加或移除资源
• 配置资源专属的工作时间和工作日
• 管理时间线资源的展开、颜色和响应式行为
• 查看资源管理最佳实践和常见场景

时间配置

📄 阅读： references/time-configuration.md

在以下情况下阅读此参考文档：

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

时间导航和指引

📄 阅读： references/time-configuration-navigation.md

在以下情况下阅读此参考文档：

• 滚动到特定时间或当前时间
• 查看时间配置最佳实践和常见场景

自定义当前时间指示器

📄 阅读： references/custom-current-time-indicator.md

在以下情况下阅读此参考文档：

• 使用 showTimeIndicator 切换当前时间指示器的显示状态
• 切换指示器线旁显示的时间标签
• 使用 currentTimeIndicatorSettings.showPreviousDates 将指示器延伸到之前的日期列
• 使用 currentTimeIndicatorSettings.onTop 强制指示器显示在预约单元格上方
• 构建交互式演示，通过复选框在运行时调整指示器配置
• 用户更改四个选项中的任意一项后，重新渲染指示器

编辑器自定义

📄 阅读： references/editor-customization.md

在以下情况下阅读此参考文档：

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

快速信息和溢出弹窗

📄 阅读： references/editor-customization-popups.md

在以下情况下阅读此参考文档：

• 自定义快速信息模板和弹窗
• 配置更多事件指示器弹窗
• 查看编辑器自定义最佳实践和常见场景

单元格自定义

📄 阅读： references/cell-customization.md

在以下情况下阅读此参考文档：

• 创建用于自定义渲染的单元格模板
• 自定义日期标题模板
• 设置时间单元格和工作单元格的样式
• 配置月份单元格模板
• 创建资源标题模板
• 向单元格添加自定义内容

重复规则编辑器

📄 阅读： references/recurrence-editor.md

在以下情况下阅读此参考：

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

页眉自定义

📄 阅读： references/header-customization.md

在以下情况下阅读此参考：

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

剪贴板操作

📄 阅读： references/clipboard-operations.md

在以下情况下阅读此参考：

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

导出和打印

📄 阅读： references/exporting.md

在以下情况下阅读此参考：

• 将事件导出为 ICS/iCal 格式
• 将调度器导出为 Excel
• 将调度器导出为 PDF
• 配置导出选项
• 实现打印功能

样式和主题

📄 阅读： references/styling-themes.md

在以下情况下阅读此参考：

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

高级功能

📄 阅读： references/advanced-features.md

在以下情况下阅读此参考：

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

事件缓冲区

📄 阅读： references/event-buffer.md

在以下情况下阅读此参考：

• 为每个预约添加事件前和事件后的缓冲时间
• 在 StartTime 前和 EndTime 后预留固定分钟数（用于准备、恢复或过渡）
• 在缓冲区胶囊中渲染自定义 bufferTemplate（图标、标签、时长文本）
• 将缓冲区与 allowOverlap="false" 结合使用，防止预留时段受到侵占
• 限制拖放操作，确保事件只能移动到与其所需专业相匹配的资源中
• 在拖动和调整大小的预览过程中，将缓冲区重新锚定到事件边缘

WebMCP 集成

📄 阅读： references/webmcp-integration.md

在以下情况下阅读此参考：

• 将 Scheduler 公开为一组类型化工具，供 AI 助手和支持 MCP 的客户端使用
• 启用 enableWebMcp 并配置 webMcpSettings（前缀、工具允许列表、允许的来源）
• 在 providers 中提供 WebMcpScheduler 模块，并绑定 beforeWebMcpToolExecute 事件
• 使用 webMcpSettings.tools 筛选已注册的工具
• 使用 webMcpSettings.exposedTo 限制跨源调用方
• 通过 beforeWebMcpToolExecute 请求确认对话框或取消工具调用

状态持久化

📄 阅读： references/state-persistence.md

在以下情况下阅读此参考：

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

无障碍

📄 阅读： references/accessibility.md

在以下情况下阅读此参考：

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

本地化与国际化

📄 阅读： references/localization.md

在以下情况下，请阅读此参考文档：

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

快速入门示例

以下是一个 Angular Scheduler 的最简可运行示例：

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 中）：

@import '../node_modules/@syncfusion/ej2-material3-theme/styles/schedule/index.css';

常见模式

模式 1：具有多个视图的 Scheduler

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: [] };
}

模式 2：具有资源的 Scheduler

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
      }
    ]
  };
}

模式 3：远程数据绑定

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: 'url',
    adaptor: new WebApiAdaptor(),
    crossDomain: true
  });

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

模式 4：重复事件

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
      }
    ]
  };
}

模式 5：事件工具提示模板

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule, CommonModule],
  providers: [DayService, WeekService, MonthService],
  template: `
    <ejs-schedule 
      width='100%' 
      height='550px'
      [selectedDate]="selectedDate"
      [eventSettings]="eventSettings">
      <ng-template #eventSettingsTooltipTemplate let-data>
        <div class="tooltip-wrap">
          <div class="subject">{{data.Subject}}</div>
          <div class="time">From&nbsp;:&nbsp;{{data.StartTime | date:'short'}}</div>
          <div class="time">To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;{{data.EndTime | date:'short'}}</div>
        </div>
      </ng-template>
    </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, 12, 30)
      }
    ],
    enableTooltip: true // Required to show the tooltip template
  };
}

模式 6：限制并发事件数（maxEventStack）

import { Component, ViewChild } from '@angular/core';
import { ScheduleComponent, ScheduleModule, EventSettingsModel, NavigatingEventArgs } from '@syncfusion/ej2-angular-schedule';
import { DayService, WeekService, WorkWeekService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule],
  providers: [DayService, WeekService, WorkWeekService],
  template: `
    <ejs-schedule 
      #scheduleObj
      width='100%' 
      height='650px'
      [selectedDate]="selectedDate"
      [eventSettings]="eventSettings"
      [currentView]="currentView"
      (navigating)="onNavigating($event)">
      <e-views>
        <e-view option="Day" [maxEventStack]="getMaxStack()"></e-view>
        <e-view option="Week" [maxEventStack]="getMaxStack()"></e-view>
        <e-view option="WorkWeek" [maxEventStack]="getMaxStack()"></e-view>
      </e-views>
    </ejs-schedule>
  `
})
export class AppComponent {
  @ViewChild('scheduleObj') public scheduleObj?: ScheduleComponent;

  public selectedDate: Date = new Date(2024, 0, 15);
  public currentView: string = 'Week';
  public displayMode: string = 'limited';
  public maxEventsLimit: number = 1;
  public eventSettings: EventSettingsModel = { dataSource: [] };

  // 0 = show all overlapping events; N = show only N per cell
  public getMaxStack(): number {
    return this.displayMode === 'all' ? 0 : this.maxEventsLimit;
  }

  // Apply maxEventStack to all view options when switching views
  public onNavigating(args: NavigatingEventArgs): void {
    if (args.action === 'view' && this.scheduleObj) {
      const value = this.displayMode === 'all' ? 0 : this.maxEventsLimit;
      const currentViews: any[] = this.scheduleObj.views as any[];
      const updatedViews = currentViews.map((view: any) => ({ ...view, maxEventStack: value }));
      this.scheduleObj.setProperties({ views: updatedViews }, true);
      this.scheduleObj.dataBind();
      this.scheduleObj.refreshEvents();
    }
  }
}

模式 7：事件缓冲区（预留前/后）

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  ScheduleComponent,
  EventSettingsModel,
  ScheduleModule,
  View,
  DayService,
  TimelineViewsService
} from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ScheduleModule],
  providers: [DayService, TimelineViewsService],
  template: `
    <ejs-schedule
      #scheduleObj
      width="100%"
      height="550px"
      [selectedDate]="selectedDate"
      [currentView]="currentView"
      [allowOverlap]="false"
      [eventSettings]="eventSettings">
      <e-views>
        <e-view option="Day"></e-view>
        <e-view option="TimelineDay"></e-view>
        <e-view option="TimelineWeek"></e-view>
      </e-views>
    </ejs-schedule>

    <ng-template #bufferTemplate let-data>
      <div class="buffer-minimal" *ngIf="getBufferDuration(data) >= 10">
        <span class="buffer-duration">
          {{ getBufferDuration(data) }} min
        </span>
      </div>
    </ng-template>
  `
})
export class AppComponent implements AfterViewInit {
  @ViewChild('scheduleObj') public scheduleObj!: ScheduleComponent;
  @ViewChild('bufferTemplate', { static: true })
  public bufferTemplateRef: any;

  public selectedDate: Date = new Date();
  public currentView: View = 'TimelineDay';

  public eventSettings: EventSettingsModel = {
    dataSource: [
      {
        Id: 1,
        Subject: 'Surgery',
        StartTime: new Date(2024, 0, 15, 9, 0),
        EndTime:   new Date(2024, 0, 15, 10, 30),
        IsAllDay: false,
        bufferBefore: 30,
        bufferAfter:  45
      }
    ],
    enableBuffer: true,
    fields: {
      bufferBefore: { name: 'bufferBefore' },
      bufferAfter:  { name: 'bufferAfter'  }
    }
  };

  public ngAfterViewInit(): void {
    this.eventSettings = {
      ...this.eventSettings,
      bufferTemplate: this.bufferTemplateRef
    };
  }

  public getBufferDuration(args: any): number {
    return args.bufferType === 'before'
      ? args.data.bufferBefore
      : args.data.bufferAfter;
  }
}

关键配置选项

核心属性

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

事件设置

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

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

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

WebMCP 服务

• WebMcpScheduler - WebMCP 集成模块。当 enableWebMcp 为 true 时，在组件的 providers 数组中提供该模块。

常见事件

事件	描述
eventClick	点击事件时触发
cellClick	点击单元格时触发
cellDoubleClick	双击单元格时触发
popupOpen	编辑器/快速信息弹出窗口打开前触发
actionBegin	CRUD 操作前触发
actionComplete	CRUD 操作后触发
dataBinding	数据绑定前触发
dataBound	数据绑定后触发
beforeWebMcpToolExecute	分发 WebMCP 工具前触发（当 enableWebMcp 为 true 时）

常见用例

1. 预约系统

创建医疗保健、美容院或服务行业的预约界面，支持资源管理、时段安排和可用性检查。

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

2. 会议室 Scheduler

通过资源分组、冲突检测和可用性显示来管理多个会议室。

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

3. 项目时间线

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

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

4. 团队日历

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

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

5. 员工轮班计划

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

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

6. 活动管理门户

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

阅读：appointments.md、appointment-templates.md、editor-customization.md、exporting.md

7. 多时区日历

通过时区转换和显示功能，处理全球团队跨不同时区的活动。

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

8. 自定义日历应用

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

阅读：appointment-templates.md、cell-customization.md、editor-customization.md、styling-themes.md

9. AI 辅助日程安排器（WebMCP）

将 Scheduler 作为一组类型化工具公开，使 AI 助手或支持 MCP 的客户端能够通过 document.modelContext 创建、更新、删除和导航日程，并切换视图。

阅读：webmcp-integration.md