Looking for to add custom field on calendar plugin popup

Topic: Looking for to add custom field on calendar plugin popup

Stylezst premium asked 8 months ago

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 8 months 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)

Stylezst premium answered 8 months 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 8 months 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.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Premium
  • 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