JavaScript 스케줄러를 구축할 때 최종 사용자에게 선호하는 이벤트 예약 방식을 제공해야 하는 경우가 많습니다. 이는 웹 개발자가 DHTMLX 스케줄러를 지지하는 큰 이유이며, 이와 관련하여 완전한 작업 자유를 제공합니다 . 라이트박스 다양한 컨트롤을 통해 이벤트 세부정보를 동적으로 변경할 수 있는 팝업 창입니다.
하지만 DHTMLX Suite 라이브러리의 위젯으로 Scheduler의 라이트박스를 보완 하려면 어떻게 해야 할까요? 이 기사에서는 Scheduler 구성 요소의 라이트박스에 DHTMLX Suite 위젯을 포함하는 방법을 단계별로 안내합니다.
스케줄러의 라이트박스에 DHTMLX 달력을 추가하는 6단계
DHTMLX Suite 라이브러리 의 모든 위젯은 Scheduler 구성 요소의 편집 양식에 완벽하게 통합될 수 있으며 알고리즘은 모든 위젯에 대해 거의 동일합니다. 따라서 실제로 이를 수행하는 방법을 설명하기 위해 DHTMLX Calendar를 예로 사용합니다. 활성화된 시간 선택기를 사용하여 스케줄러의 라이트박스에 이 기능을 추가하겠습니다. 그러면 이벤트 날짜와 기간을 12시간 또는 24시간 형식으로 쉽게 지정하는 데 도움이 됩니다.
예상되는 결과는 다음과 같습니다.
1 단계
먼저, Scheduler.form_blocks에 새로운 편집기 개체를 생성해야 합니다. 이를 위해서는 HTML 요소를 반환하는 render 메소드를 사용해야 합니다. 이 메소드에서는 컨테이너를 생성하고 그 안에 날짜 선택기를 생성하기만 하면 됩니다.
scheduler.form_blocks["custom_date_editor"]={
render:function(config){ // config- section configuration object
return `<div class='custom_date_editor-wrapper'>
<div name="start_date"></div>
<div name="end_date"></div>
</div>
`;
},
set_value:function(node,value,ev,config){
},
get_value:function(node,ev,config){
},
focus:function(node){
}
};2 단계
그런 다음 공용 변수 startDateCalendar 및 startDateCalendar를 생성해야 합니다.
let startDateCalendar;
let endDateCalendar;이러한 변수는 시간 선택기가 배치될 달력 개체에 액세스하는 데 사용됩니다.
3단계
다음 단계는 달력을 다시 초기화해야 할 때 호출되는 initcalendar() 함수를 만드는 것입니다. 즉, 라이트박스가 열릴 때마다 이 함수는 새 달력을 만들기 전에 소멸자 메서드를 사용하여 이전 달력(존재하는 경우)도 삭제합니다. . 날짜 선택 기능을 보완하여 예약된 이벤트의 시간을 선택할 수 있도록 timePicker 속성 값을 true로 설정해야 합니다. 아래 코드 샘플에서는 dhx_widget - borderdered CSS 클래스를 사용하여 달력의 테두리를 지정하는 데 도움을 줍니다.
function initCalendars(startDateElement, endDateElement){
if(startDateCalendar){
destroyCalendars();
}
startDateCalendar = new dhx.Calendar(startDateElement, {
timePicker: true,
css: "dhx_widget--bordered"
});
endDateCalendar = new dhx.Calendar(endDateElement, {
timePicker: true,
css: "dhx_widget--bordered"
});
}
function destroyCalendars(){
if(startDateCalendar){
startDateCalendar.destructor();
endDateCalendar.destructor();
startDateCalendar = null;
endDateCalendar = null;
}
}4단계
이제 컨트롤이 새 값을 받을 때마다 호출되는 라이트박스 컨트롤 개체의 set_value 함수를 고려해 볼 차례입니다. 이는 라이트박스가 열려 있을 때 컨트롤이 API를 통해 새 값을 수신할 때 발생합니다.
여기에서 달력을 초기화하고 해당 값을 채워야 합니다.
set_value:function(node,value,ev,config){
initCalendars(node.querySelector("[name='start_date']"), node.querySelector("[name='end_date']"));
startDateCalendar.setValue(new Date(ev.start_date));
endDateCalendar.setValue(new Date(ev.end_date));
},5단계
컨트롤이 이벤트 전반에 걸쳐 이러한 값을 저장하려면 get_value 함수에서 해당 값을 반환해야 합니다.
이 예에서 함수는 다음과 같습니다.
get_value:function(node,ev,config){
const start_date = startDateCalendar.getValue(true);
const end_date = endDateCalendar.getValue(true);
ev.start_date = start_date;
ev.end_date = end_date;
return {
start_date,
end_date
};
},여기서는 두 가지 작업이 수행되고 있음을 명확히 하는 것이 중요합니다.
- 매개변수로 전달된 이벤트를 수정하고 개체에 새 날짜 값을 직접 할당할 수 있습니다. 이는 이벤트의 여러 다른 속성에 매핑되는 컨트롤에 대한 일반적인 접근 방식입니다.
- 함수에서 datepicker 값을 Scheduler.formSection(name).getvalue() 메소드가 제어 값에 액세스할 수 있도록 하는 {start_date, end_date} 객체로 반환합니다.
이벤트 객체의 단일 속성에 매핑되는 간단한 컨트롤을 구현할 때 이벤트 객체를 수정할 필요 없이 메서드에서 값을 반환하기만 하면 반환 값이 자동으로 해당 속성에 할당됩니다. 이벤트 객체의.
6단계
마지막으로 달력이 더 이상 필요하지 않으면 일반적으로 DHTMLX 스케줄러의 onAfterLightbox 이벤트를 사용하여 달력을 삭제해야 합니다.
scheduler.attachEvent("onAfterLightbox", destroyCalendars);이 예에서는 시간 선택기 기능이 포함된 이벤트 달력을 보고 사용할 수 있습니다.