customize the pop-up window event

This topic has 5 replies, 2 voices, and was last updated 3 years, 5 months ago by kboughaba.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
June 20, 2021 at 9:50 pm #101915

kboughaba
Member

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.

June 22, 2021 at 10:57 am #101924
yavordashew
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/
June 22, 2021 at 11:49 am #101925

kboughaba
Member

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

June 22, 2021 at 4:22 pm #101930

kboughaba
Member

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>

June 23, 2021 at 9:55 am #101931

yavordashew
Member

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/

June 23, 2021 at 3:22 pm #101933

kboughaba
Member

Hello,
yes, it works.

Thank you.
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.