Bryntum 调度器(审判)

Bryntum调度器是一个全功能化的资源调度器,支持广泛的功能. 它与React,Vue,Angular,或平地香草JS顺利融合.

关于Bryntum调度器的更多信息,请访问 Bryntum 调度站点

要点

• 具有横向或纵向时间表的资源意识调度 日视图布局
• 强大的 拖放 重新调整网格等外部来源的大小并拖曳
• 虚拟渲染 高效处理只显示 DOM 内容的大型数据集
• 事件依赖关系 可视化任务关系与依赖线
• 导出为 PDF/巴布亚新几内亚, (中文(简体) ), 埃克塞尔,ICS日历文件,或打印格式
• 分组和总结 按资源属性分列的自定义聚合事件
• 树状资源结构 显示父/子关系的分级资源
• 合并重叠事件 自动结合相邻事件进行清洁显示
• 完全响应 屏幕大小的可配置断点
• 自定义事件渲染 带有渲染器和模板的控制外观
• 多个内置主题或 创建自己的 使用 CSS 变量
• 反应, (中文(简体) ), 阴道,以及 角质 带有本地框架图案的包装

软件包内容

说明: 试件包不包括精密的捆绑,源地图,或源文件.

支持的版本

• 节点JS数字 : >= 20.0.0
• 类型脚本数字 : >= 3.6.0
• 角质数字 : >= 9.0.0
• 反应数字 : >= 16.0.0
• 阴道数字 : >= 3.0.0
• 维特数字 : >= 4.0.0
• 网络软件包数字 : >= 4.0.0

尝试 Bryntum 在线演示

探索我们综合收集的演示文稿:

• 查看在线演示
• JavaScript 演示文稿
• 反应演示文稿
• Vue Demos 语录
• 角分数

安装

这是一个 试验包 功能有限.

为什么用npm异形?

试验包使用 npm 化名安装 @bryntum/scheduler-trial 下划线 @bryntum/scheduler 名称。 这种办法 提供无缝升级路径 - 当您购买许可证时, 您只需要更新在 package.json 不更改任何应用程序代码.

使用 npm数字 :

npm install @bryntum/scheduler@npm:@bryntum/scheduler-trial@latest

或者说用 yarn数字 :

yarn add @bryntum/scheduler@npm:@bryntum/scheduler-trial@latest

或者,添加到 package.json 依赖性 :

"dependencies": {
  "@bryntum/scheduler": "npm:@bryntum/scheduler-trial@latest"
}

拜访我们 npm 仓库指南 学习更多关于安装和迁移的 尝试到许可的软件包.

利用人工智能探员?

一个 AI 助手编写工作 Bryntum 调度码的最快路径 :

1. MCP服务器. 配置您的代理服务器为 Bryntum MCP 服务器, 以获取禁用、 版本正确的答案 : 设置指南。 。 。 .
2. 特工技能。 。 . 安装 布林图姆技能 用于 Claude 代码、光标或 Codex——它将公约捆绑在下面.

特工常用的试验包陷阱:

• 斯道尔训练数据. Bryntum 船打破了变化; 不要信任您记得的 API 形状 。 检查 https://bryntum.com/出品/排程/docs 先说.
• 你是在审判. 软件包安装为 @bryntum/scheduler-trial 但别名改为 @bryntum/scheduler —— 说 导入路径必须使用别名(@bryntum/scheduler) (中文(简体) ). 要升级到许可证软件包,请将别名改为 "npm:@bryntum/scheduler@latest"; 不重写导入.
• 试验捆绑没有精密化 并包含一个水印;这是预期的,不是错误.
• CSS (英语). 导入字体, scheduler.css (结构),并作主题.
• 框架包装 (单位:千美元)@bryntum/scheduler-react, (中文(简体) ), -angular, (中文(简体) ), -vue-3) 需要核心 @bryntum/scheduler 软件包; 运行时只安装包装失败 .
• 类型脚本 装入 *.d.ts ;不要手卷接口.

快速启动

香草 Java 脚本

import { Scheduler } from '@bryntum/scheduler';
import './style.css';

const scheduler = new Scheduler({
    appendTo         : 'app',
    startDate        : new Date(2026, 0, 1),
    endDate          : new Date(2026, 0, 30),
    autoHeight       : true,
    rowHeight        : 50,
    barMargin        : 5,
    multiEventSelect : true,

    columns : [
        { text : 'Name', field : 'name', width : 160 }
    ],

    resources : [
        { id : 1,  name : 'Dan Stevenson'  },
        { id : 2,  name : 'Talisha Babin'  },
        { id : 3,  name : 'Ravi Kumar'     },
        { id : 4,  name : 'Aisha Khan'     },
        { id : 5,  name : 'Michael Chen'   },
        { id : 6,  name : 'Sofia Lopez'    },
        { id : 7,  name : 'James Anderson' },
        { id : 8,  name : 'Eddie Johnson'  },
        { id : 9,  name : 'Ethan Wright'   },
        { id : 10, name : 'Liu Wei'        }
    ],
    events : [
        { resourceId : 1,  startDate : '2026-01-01', endDate : '2026-01-05', name : 'Kickoff Meeting' },
        { resourceId : 1,  startDate : '2026-01-06', endDate : '2026-01-10', name : 'Scope Definition' },
        { resourceId : 1,  startDate : '2026-01-12', endDate : '2026-01-29', name : 'Project Plan Review' },
        { resourceId : 2,  startDate : '2026-01-02', endDate : '2026-01-06', name : 'Requirement Gathering' },
        { resourceId : 2,  startDate : '2026-01-07', endDate : '2026-01-21', name : 'Stakeholder Interviews' },
        { resourceId : 2,  startDate : '2026-01-22', endDate : '2026-01-27', name : 'Requirement Signoff' },
        { resourceId : 3,  startDate : '2026-01-05', endDate : '2026-01-14', name : 'System Design' },
        { resourceId : 3,  startDate : '2026-01-10', endDate : '2026-01-20', name : 'Database Modeling' },
        { resourceId : 3,  startDate : '2026-01-23', endDate : '2026-01-28', name : 'API Design' },
        { resourceId : 4,  startDate : '2026-01-08', endDate : '2026-01-15', name : 'Backend Setup' },
        { resourceId : 4,  startDate : '2026-01-15', endDate : '2026-01-22', name : 'Authentication Module' },
        { resourceId : 4,  startDate : '2026-01-21', endDate : '2026-01-27', name : 'Data Services' },
        { resourceId : 5,  startDate : '2026-01-02', endDate : '2026-01-14', name : 'UI Wireframes' },
        { resourceId : 5,  startDate : '2026-01-15', endDate : '2026-01-19', name : 'Frontend Components' },
        { resourceId : 5,  startDate : '2026-01-20', endDate : '2026-01-27', name : 'Styling & Theme' },
        { resourceId : 6,  startDate : '2026-01-12', endDate : '2026-01-16', name : 'API Integration' },
        { resourceId : 6,  startDate : '2026-01-17', endDate : '2026-01-21', name : 'GraphQL Setup' },
        { resourceId : 6,  startDate : '2026-01-22', endDate : '2026-01-25', name : 'Integration Testing' },
        { resourceId : 7,  startDate : '2026-01-05', endDate : '2026-01-10', name : 'Unit Testing' },
        { resourceId : 7,  startDate : '2026-01-12', endDate : '2026-01-19', name : 'Automation Scripts' },
        { resourceId : 7,  startDate : '2026-01-18', endDate : '2026-01-27', name : 'Performance Testing' },
        { resourceId : 8,  startDate : '2026-01-10', endDate : '2026-01-22', name : 'Bug Fix Round 1' },
        { resourceId : 8,  startDate : '2026-01-23', endDate : '2026-01-26', name : 'UI Fixes' },
        { resourceId : 8,  startDate : '2026-01-27', endDate : '2026-01-30', name : 'Regression Testing' },
        { resourceId : 9,  startDate : '2026-01-03', endDate : '2026-01-14', name : 'Client Demo Prep' },
        { resourceId : 9,  startDate : '2026-01-15', endDate : '2026-01-19', name : 'Client Review' },
        { resourceId : 9,  startDate : '2026-01-20', endDate : '2026-01-24', name : 'Feedback Implementation' },
        { resourceId : 10, startDate : '2026-01-02', endDate : '2026-01-16', name : 'Deployment Setup' },
        { resourceId : 10, startDate : '2026-01-19', endDate : '2026-01-22', name : 'Go-Live' },
        { resourceId : 10, startDate : '2026-01-23', endDate : '2026-01-27', name : 'Post-Deployment Support' }
    ]
});

在那个 style.css数字 :

/* FontAwesome is used for icons */
@import "@bryntum/scheduler/fontawesome/css/fontawesome.css";
@import "@bryntum/scheduler/fontawesome/css/solid.css";
/* Structural CSS */
@import "@bryntum/scheduler/scheduler.css";
/* Bryntum theme of your choice */
@import "@bryntum/scheduler/svalbard-light.css";

访问我们的 Java 脚本 快速启动指南 学习更多.

主题

Svalbad( 默认)

光线	阴暗

斯德哥尔摩

光线	阴暗

维斯比

光线	阴暗

材料3

光线	阴暗

高对比度

光线	阴暗

流利的 2

光线	阴暗

关于自定义主题的更多信息,请参见: 样式指南。 。 。 .

框架整合

Bryntum 调度器为通俗框架提供一等包装. 每个包装都遵循本地框架模式 和生命周期管理.

说明: 框架包装是公开的,可以正常安装. 它们要求有核心包.

反应

npm install @bryntum/scheduler-react@latest

拜访我们 反应快速启动指南 学习更多.

角质

npm install @bryntum/scheduler-angular@latest

拜访我们 角快启动指南 学习更多.

第3组

npm install @bryntum/scheduler-vue-3@latest

拜访我们 Vue 快速启动指南 学习更多.

探索所有Bryntum 产品

• Bryntum 网格 - 高性能数据网
• Bryntum 调度器 - 资源调度部分
• Bryntum 调度器 Pro - 有依赖关系的高级排程
• 布林图姆·甘特 - 项目规划和管理
• 布林图姆日历 - 完整的日历组件
• Bryntum 任务板 - 坎班式任务管理

探索我们综合收集的演示文稿:

产品	Java 脚本	反应	阴道	角质
网格	网格 JavaScript 演示	网格反应演示	网格 Vue 演示	网格角演示
调度器	JavaScript 演示	调度器反应演示	调度员 Vue 演示	调度器
调度器Pro	调度器 Pro JavaScript 演示	排程器 Pro React 演示	调度器 Pro Vue 演示	排程器 Pro Angular 演示
甘特语	甘特Java脚本演示	甘特反应演示	Gantt Vue 演示	Gantt 角力演示
日历	日历 JavaScript 演示	日历反应演示	日历 Vue 演示	日历角演示
任务栏	任务板 JavaScript 演示	任务板反应演示	任务板 Vue 演示	任务板角演示

在线参考资料

• Bryntum 调度文件

• 布林图姆调度器示例

• 布林图姆支持论坛

• 联系我们

许可证和版权

Bryntum调度器是商业软件,需要付费许可证. 请访问 Bryntum 调度器结束用户许可证 执照的全文.

版权所有:2009-2026年,Bryntum 版权所有.