JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Window › customize the pop-up window event › Reply To: customize the pop-up window event
June 22, 2021 at 10:57 am
#101924
Member
Hi kboughaba,
I have prepared a quick code snippet which showcases how to achieve the functionality you want.
//In your JS file:
window.onload = function () {
const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('editDialogOpen', function (event) {
const editors = event.detail.editors;
if (!editors) {
return;
}
const schedulerEvent = event.detail.item,
dateEndEditor = editors.dateEnd,
backgroundColorEditor = editors.backgroundColor,
statusEditor = editors.status;
let checkbox = document.createElement('smart-check-box');
checkbox.innerHTML = 'Checkbox label'
checkbox.addEventListener('click' , () => {
let statusInput = statusEditor.querySelector('smart-input');
if(checkbox.checked){
statusInput.disabled = true;
}
else {
statusInput.disabled = false;
}
})
dateEndEditor.insertAdjacentElement('afterend', checkbox)
});
};
Also we have two demos regarding customization of the editing window:
https://www.htmlelements.com/demos/scheduler/custom-window/index.htm
https://www.htmlelements.com/demos/scheduler/custom-window-editors/index.htm
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/