Pop-up Customization

[ilija-jovev]

I'm still evaluating calendar pop-up customization options and the two options I've found so far are not convincing me to go down their road:

Option 1: Create my own pop-up.

• While this option gives me full control over the pop-up, the effort and exposure it takes to develop it, almost defeats the purpose of using this beautifully built and working calendar.

Option 2: Edit the code of the original popup, by forking the repo.

• This is another option that is far from straight forward and has several downsides.

What I would like to ask is: Is there any function that executes right after the pop-up is built and displayed? I'm thinking of using this event to make some changes to the pop-up html content with JavaScript. I will then use my own changes to capture and process the additional information I need.

Let me know if (and why) you think this is a bad idea and what in your opinion is the optimal way to make changes to the pop-up.

Thank You

[adhrinae]

@ilija-jovev

Yes, Those options are exactly defined like when I explain to someone else about the current status.

And your idea is fair enough, But I found that It's quite hard to provide a way to intercept the popup element at the current stage.

• It needs another option flag to disable the default behavior of the 'Save' button.
• The popup doesn't rely on form to gather and pass the data. When the user clicks the 'Save' button, the popup collects data from DOM directly. This makes us hard to add and manage inputs dynamically.
  • So when library users add other fields to the popup, there must be a way to collect data from inputs after clicking the 'Save' button. Or Adding other options to interact with the 'Save' button along with the 'intercept the popup element' feature.

Also, the team is working on the next major update. I'll try to resolve this problem in the next major version. But I don't see the point to put the resource at this time since there's 'option 1' already.

[m6tm]

I think to be more specific is that it should is a way to write or add fields dynamically. And allow to be able to control the type of fields. Thus we can extract the calendar with this information and be able to import it later.

[ilija-jovev]

Maybe a good idea for the next major update is to provide an option for us to customize the content of the pop-up with flags. Like a flag for displaying an additional free text entry field, another one for a dropdown, etc...
Thanks for the answer

[KoljaL]

I would very much welcome such an opportunity.
Until then, I will try a very dirty method:

setTimeout(function() {
    // deb(document.querySelectorAll('.tui-full-calendar-time-date'))
    document.querySelectorAll('.tui-full-calendar-time-date').forEach(item => {
        item.addEventListener('click', event => {
            if (event.target.classList.contains('tui-full-calendar-time-date-schedule-block-wrap')) {
                deb(event.target)
                setTimeout(function() {
                    document.getElementById('tui-full-calendar-schedule-location').value = "myLocation"
                }, 500);
            }
        })
    })
}, 500);