customize the pop-up window event

[kboughaba]

Hello,
I’m trying to customize the pop-up window event (add a checkbox field) when a user’s date is clicked, and disable some of them (like the background-color field).
do you have an example to follow, please ?
( i’m working on smart.scheduler product )
thank you.

[yavordashew]

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/

[kboughaba]

Hello,
Thank you for your reply.
I tried this script and it works.

[kboughaba]

hello,
In fact, i followed your example, but the problem is that in “event.detail.editors” i found label, backgroundColor, notifications, .. and not the field that i’ve  added.
the script that i used :
<div>
<div>   ——————————————————————————————————
<div>
<div>let astreinteElement = editorsContainer.querySelector(‘#smart-input’);</div>
<div>    if (!astreinteElement) {</div>
<div>      const elementContainer = document.createElement(‘smart-check-box’),</div>
<div>      label = document.createElement(‘astreinte’);</div>
<div>      label.textContent = ‘Astreinte: ‘;</div>
<div>      elementContainer.classList.add(‘smart-scheduler-window-editor’);</div>
<div>      elementContainer.appendChild(label);</div>
<div>      astreinteElement = document.createElement(‘smart-check-box’);</div>
<div>      astreinteElement.id = ‘smart-input’;</div>
<div>      elementContainer.append(astreinteElement);</div>
<div>      editorsContainer.appendChild(elementContainer);</div>
<div>    }</div>
</div>
<div>   ——————————————————————————————————
<div></div>
<div>thank you for your help.</div>
</div>
</div>
</div>

[yavordashew]

Hi kboughaba,
Yes, that is normal because event.detail.editors are generated by the SmartScheduler depending on properties and etc.
If you want to add a event listener (for example) to the item that you have added you can do it like in the code snippet that I have sent you in my
previous reply.
Also if you need more assistance do not hesitate to contact us!
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[kboughaba]

Hello,
yes, it works.
 
Thank you.

[Author]

Posts