Topic: Looking for to add custom field on calendar plugin popup
Hello Support Team,
I'm looking to add custom form fields like "Select" or "Autocomplete" on the calendar popup model, Can you please share more information on how to do that or any example? Please find the below screenshots so you will get an idea of what we are looking for...
Screenshots: https://www.awesomescreenshot.com/image/17497572?key=cb5eaf49a0d357cbdf6fb043a1830a8d
Here is the Snippet URL: https://mdbootstrap.com/snippets/standard/stylezst/3484696
Looking forward to hear you. Thank you
Grzegorz Bujański staff answered 3 years ago
At the moment, we do not have such an option. I will add this to our list of ideas and we will consider adding this option.
Stylezst pro premium answered 3 years ago
Okay, got it!! So for adding new fields, we customize the calendar-plugin javascript but when we try to add MDB "Select" or "Autocomplete" fields they didn't render properly. So can you please help us to render properly I found a way how to add fields into the popup but it renders normal HTML "Select" or "Autocomplete" fields not MDB "Select" or "Autocomplete" fields?
Here is the video so you will get the idea (As you see in the video I set the select box in the above calendar and inside the popup so the result is inside the popup select box is not properly rendered): https://www.awesomescreenshot.com/video/6285157?key=cea55f71e2741a211dd58539aa7e70e8
Please help us to render a select box inside the calendar popup!
Thank you.
Grzegorz Bujański staff answered 3 years ago
Guesses you added select and autocomplete in methods addModalTemplate
andeditModalTemplate
? In this case, manual initialization is required.
const select = document.querySelector('.select');
const selectInstance = mdb.Select.getOrCreateInstance(select);
const autocomplete = document.querySelector('#autocompleteId')
const autocompleteInstance = mdb.Autocomplete.getOrCreateInstance(autocomplete)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: laptop
- Browser: Chrome
- OS: Window 10
- Provided sample code: No
- Provided link: Yes