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

Stylezst premium asked 2 years 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...


Here is the Snippet URL:

Looking forward to hear you. Thank you

Grzegorz Bujański staff answered 2 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)

Stylezst premium answered 2 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):

Please help us to render a select box inside the calendar popup!

Thank you.

Grzegorz Bujański staff answered 2 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.

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

  • ForumUser: 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