使用 dhtmlxLayout 是在页面上组织多个调度器的便捷方式。它不仅提供了美观的框架，还能帮助管理与页面其他元素的交互，并能顺畅适应页面尺寸的变化。
请注意，dhtmlxLayout 并不包含在 dhtmlxScheduler 库中。根据您使用的 dhtmlxSuite 版本，Layout 有两个不同的版本可供选择。
在该版本中，dhtmlxLayout 可以作为独立产品或 dhtmlxSuite 库的一部分使用。要在项目中引入 dhtmlxLayout v5.X，您需要购买许可证。
要将 dhtmlxScheduler 实例添加到 layout 单元格中，请使用 attachScheduler() 方法。
注意，将调度器附加到单元格会自动初始化它。因此，请在插入到 layout 之前完成调度器的相关配置。
function init() {
var dhxLayout = new dhtmlXLayoutObject(document.body, "2U");
sched1 = Scheduler.getSchedulerInstance();
sched1.config.multi_day = true;
dhxLayout.cells("a").attachScheduler(new Date(2019,05,30),"week",null,sched1);
sched1.load("/data/units")
sched2 = Scheduler.getSchedulerInstance();
dhxLayout.cells("b").attachScheduler(new Date(2019,05,30),"month",null,sched2);
sched2.load("/data/units")
}
Related sample: Integration with dhtmlxLayout (dhx_terrace skin, Suite v5.1)
从 dhtmlxSuite 6.0 开始，dhtmlxLayout 仅作为完整 Suite 库的一部分提供。若要以此方式使用，需获取 Suite 6.X 库的许可证。
自 版本 5.3 起，dhtmlxScheduler 实现了与 dhtmlxSuite v6+ 兼容的通用 View 接口，并且可以直接附加到任意单元格：
// 创建并配置 scheduler 实例
scheduler.config.header = [
"day",
"week",
"month",
"date",
"prev",
"today",
"next"
];
scheduler.config.multi_day = true;
// scheduler 附加后，将触发 onSchedulerReady 事件
scheduler.attachEvent("onSchedulerReady", function () {
requestAnimationFrame(function(){
// 此处可设置初始视图和日期，并加载数据
scheduler.setCurrentView(new Date(2017,5,3), "week");
scheduler.load("../common/events.json");
});
});
const layout = new dhx.Layout("layout", {
rows: [{
id: "scheduler-cell",
header: "Appointment Scheduler",
html:"<div></div>"
}]
});
layout.cell("scheduler-cell").attach(scheduler);
dhtmlxSuite Layout 以异步方式运行，因此在调用 .attach 后调度器不会立即可用。