dhtmlxLayout를 사용하면 여러 개의 스케줄러를 한 페이지에 효과적으로 배치할 수 있습니다. dhtmlxLayout는 세련된 프레임을 제공하며, 페이지 크기 변화에 유연하게 적응하면서 다른 페이지 요소와의 상호작용을 관리하는 데 도움을 줍니다.
dhtmlxLayout는 dhtmlxScheduler 라이브러리에 포함되어 있지 않습니다. 사용하는 dhtmlxSuite 라이브러리 버전에 따라 두 가지 버전의 Layout이 제공됩니다.
이 버전에서는 dhtmlxLayout를 독립형 제품 또는 dhtmlxSuite 라이브러리의 일부로 사용할 수 있습니다. 프로젝트에 dhtmlxLayout v5.X를 포함하려면 라이선스 구매가 필요합니다.
dhtmlxScheduler 인스턴스를 레이아웃 셀에 추가하려면 attachScheduler() 메서드를 사용하세요.
참고: 스케줄러를 셀에 연결하면 자동으로 초기화됩니다. 따라서, 스케줄러를 레이아웃에 추가하기 전에 먼저 설정을 구성해야 합니다.
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.config.header = [
"day",
"week",
"month",
"date",
"prev",
"today",
"next"
];
scheduler.config.multi_day = true;
// 스케줄러가 연결된 후 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를 호출한 직후에는 스케줄러가 바로 준비되지 않습니다.