跳转到主要内容

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" 分步指南。

在线示例

想查看 DHTMLX Scheduler 的实际效果,可访问以下在线示例:

核心能力

DHTMLX Scheduler 专注于交互式日历体验与可扩展性。以下章节概览了核心能力,并提供深入文档入口。

日历视图与导航

Scheduler 提供多种时间与事件可视化方式:

事件创建与编辑

Scheduler 采用“以日历为中心”的编辑方式:

  • 支持拖拽创建、拖拽调整时长、拖拽移动(可配置)。
  • 内置编辑器(Lightbox)及可选扩展 Quick Info 弹窗。
  • 支持 事件文本Tooltip、表头和 UI 片段模板(可完全控制渲染)。

重复系列与例外

重复事件通过专用扩展和现代重复规则格式实现。详见 Recurring Events

资源排班视图(PRO)

PRO 提供常用于资源调度的高级排班模式:

数据加载、格式与同步

Scheduler 可通过多种方式连接你的数据层:

框架与后端集成

前端集成

Scheduler 可以这样使用:

安装说明

  • Standard 版本:
    • npm install dhtmlx-scheduler
    • 或通过 CDN 引入。
  • PRO/Evaluation:
    • 通过私有 npm registry 安装,或手动/从本地目录添加包,详见 安装指南

下一步

如果你刚开始使用:

  1. 选择一个框架快速开始指南,或从 纯 HTML/JS 初始化 开始。
  2. 配置你的 UI:headerviewstemplates 以及编辑规则。
  3. 启用所需的扩展 - PRO 中的 RecurringTimeline/UnitsQuick InfoTooltip 等。
  4. 按照 Server-Side Integration 指南连接后端。
  5. 继续阅读 GuidesAPI reference 进行深度定制。

如果你正在升级,请查看文档中的 What's newmigration guides

Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.