DHTMLX Scheduler 概览
DHTMLX Scheduler 是一个用于在浏览器中显示和编辑日程的 JavaScript 事件日历组件。 它支持经典日历视图(Day/Week/Month/Year)、丰富的事件编辑能力(拖拽创建/调整时 长/移动 + Lightbox)、重复事件系列,以及高级资源排班视图(PRO 中的 Timeline/Units)。
DHTMLX Scheduler 提供 Standard 和 PRO 两个版本。Standard 版本可通过公开包源安装,PRO/Evaluation 可通过私有 npm registry 安装(也可手动添加)。
按框架快速开始
你可以将 DHTMLX Scheduler 作为原生 JavaScript 小部件使用,也可以集成到现代框架中。请根据你的技术栈选择对应的 "How to start" 分步指南。

通过 script 标签或打包工具完成最小化集成。

使用现成的 ReactScheduler 组件,并通过 props 与事件进行配置。

通过轻量封装组件将 Scheduler 集成到 Angular 项目中。

使用小型封装与响应式配置,在 Vue 应用中集成 Scheduler。

通过一个简单组件在 Svelte 中嵌入 Scheduler,并绑定配置和事件。

将 Scheduler 核心组件嵌入你自己的组件中,以完全控制生命周期和数据流。

在 Salesforce Lightning Web Components 中使用 Scheduler,并连接组织数据。
在线示例
想查看 DHTMLX Scheduler 的实际效果,可访问以下在线示例:
核心能力
DHTMLX Scheduler 专注于交互式日历体验与可扩展性。以下章节概览了核心能力,并提供深入文档入口。
日历视图与导航
Scheduler 提供多种时间与事件可视化方式:
事件创建与编辑
Scheduler 采用“以日历为中心”的编辑方式:
- 支持拖拽创建、拖拽调整时长、拖拽移动(可配置)。
- 内置编辑器(Lightbox)及可选扩展 Quick Info 弹窗。
- 支持 事件文本、Tooltip、表头和 UI 片段模板(可完全控制渲染)。
重复系列与例外
重复事件通过专用扩展和现代重复规则格式实现。详见 Recurring Events。
资源排班视图(PRO)
PRO 提供常用于资源调度的高级排班模式:
- Timeline 视图、Units 视图、Week Agenda、Grid 视图,以及其他 PRO 专属扩展。
- 通过 Multisection 扩展支持多分区事件(将一个事件分配给多个资源/分区)。
数据加载、格式与同步
Scheduler 可通过多种方式连接你的数据层:
- 从后端加载数据并保持同步(常见做法是 REST 风格 API + DataProcessor)。
- 提供多种技术栈的服务端 How to start 指南(Node、ASP.NET Core、PHP/Laravel、Ruby 等)。
框架与后端集成
前端集成
Scheduler 可以这样使用:
- 作为独立 JS 小部件用于任意页面 - 纯 HTML/JS 初始化。
- 通过 How to start 指南,封装到框架组件中:React/Angular/Vue/Svelte。
安装说明
- Standard 版本:
-
npm install dhtmlx-scheduler - 或通过 CDN 引入。
-
- PRO/Evaluation:
- 通过私有 npm registry 安装,或手动/从本地目录添加包,详见 安装指南。
下一步
如果你刚开始使用:
- 选择一个框架快速开始指南,或从 纯 HTML/JS 初始化 开始。
- 配置你的 UI:header、views、templates 以及编辑规则。
- 启用所需的扩展 - PRO 中的 Recurring、Timeline/Units、Quick Info、Tooltip 等。
- 按照 Server-Side Integration 指南连接后端。
- 继续阅读 Guides 与 API reference 进行深度定制。
如果你正在升级,请查看文档中的 What's new 和 migration guides。