SuperAPI AI 工具集

syncfusion-angular-scheduler

前端与建站

查看项目

更新于 10-15 15:17

技能介绍

用途

Syncfusion Angular Scheduler(组件标签 ejs-schedule,包名 @syncfusion/ej2-angular-schedule)用于在 Angular 应用中实现日历与事件管理功能。适用场景包括:事件与预约管理、多资源调度(会议室、设备、人员)、时间线视图下的项目规划与资源分配、医疗/美容/会议室等预约系统、带重复事件与提醒的完整日历应用、跨时区的全球团队排期,以及工作日与工作时间的业务配置。

主要能力

  • 视图模式:提供 11 种以上视图,包括 Day、Week、WorkWeek、Month、Year、Agenda、MonthAgenda 以及 Timeline 系列(TimelineDay、TimelineWeek、TimelineMonth、TimelineYear)。
  • 事件类型:支持普通事件、跨天事件、全天事件与重复事件,重复规则支持复杂模式。
  • 数据绑定:支持本地数组与远程数据源(OData、Web API、REST),可通过 DataManager 进行高级数据操作,支持字段映射与 CRUD(创建、读取、更新、删除)。
  • 资源管理:支持单资源与多资源分组,可按日期或按资源分组,支持自定义资源颜色、模板、过滤与动态增删资源,以及资源专属工作时间。
  • 时间配置:可自定义时间刻度与时间槽、设置日视图起止小时、定义工作日与工作时间、支持时区转换与多时区、自定义时间格式。
  • 定制能力:支持单元格模板、日期表头模板、编辑器模板、事件模板、事件提示模板、快速信息弹窗与溢出弹窗定制。
  • 高级功能:拖放、缩放、剪贴板操作(Ctrl+C/Ctrl+X/Ctrl+V)、虚拟滚动、懒加载、行自动高度、多实例管理、事件缓冲(事件前后预留时间与自定义 bufferTemplate)。
  • 导出与打印:支持导出为 ICS/iCal、Excel、PDF,并提供打印功能。
  • 重复编辑器:支持 RRULE 格式,可配置 Daily、Weekly、Monthly、Yearly 模式,处理 FREQ、INTERVAL、BYDAY、BYMONTHDAY 参数与 EXDATE 例外日期,可编辑整个系列或单次事件。
  • 状态持久化:支持启用状态持久化、配置需持久化的属性、结合 localStorage 恢复或清除状态。
  • 无障碍与本地化:符合 WCAG 2.1,支持键盘导航、ARIA 属性、屏幕阅读器、高对比度主题,以及多语言、RTL 与自定义本地化。
  • WebMCP 集成:可将 Scheduler 暴露为面向 AI 助手与 MCP 客户端的类型化工具,通过 enableWebMcp 与 webMcpSettings(前缀、工具白名单、允许来源)配置,并提供 WebMcpScheduler 模块与 beforeWebMcpToolExecute 事件。

使用方式

在 Angular 中导入 ScheduleModule,并在 providers 中注册所需视图服务(如 DayService、WeekService、WorkWeekService、MonthService、AgendaService、TimelineViewsService、TimelineMonthService 等),然后在模板中使用 ejs-schedule 标签,通过 selectedDate、currentView、views、eventSettings、group 等输入属性进行配置。事件数据通过 eventSettings.dataSource 提供,字段包括 Id、Subject、StartTime、EndTime,重复事件使用 RecurrenceRule。资源通过 e-resources 与 e-resource 子标签声明,并配合 group 属性启用分组。远程数据可使用 DataManager 搭配 WebApiAdaptor。样式需在 styles.css 中导入主题 CSS,例如 @import '../node_modules/@syncfusion/ej2-material3-theme/styles/schedule/index.css'。

适用场景

适合需要在 Angular 项目中快速构建日程、预约、排班与资源调度界面的开发场景,尤其是需要多视图切换、重复事件、多资源分组、时区处理与导出能力的业务系统。

限制

资料未提供该组件的收费、价格、授权方式、性能上限或浏览器兼容性等具体信息,暂未提供。