Topic: Access Modal Data Programmically
Expected behavior var description = document.getElementsByName("description"); alert(description);
This should display the text in the description field of the add event modal for the mdb calendar plugin.
Actual behavior I am getting this message. [object NodeList]
Resources (screenshots, code snippets etc.)
How would I go about getting a hold of the event modal values programmatically after they are submitted when the "Add" button is pressed on the add event modal. I am wanting to save them to a database during the same process that adds them to the calendar?
getElementsByName method returns NodeList of all elements with name="description" set.
You can find more information about this method here.
I prepare a snippet for you where you can see 2 examples of how to get input value with name="description": https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/4506347#js-tab-view
After clicking the Add button in the modal, the event addEvent.mdb.calendar is triggered. You can listen to this event and use it to get all event data and save them on your server.
calendarElement.addEventListener('addEvent.mdb.calendar', (e) => {
// all event data is returned as e.event.
// you need send this data to your API. ForExample:
fetch('https://your.api/new-calendar-event', {
method: 'post',
body: JSON.stringify({
summary: e.event.summary,
description: e.event.description,
startDate: e.event.start.date,
startDateTime: e.event.start.dateTime,
endDate: e.event.end.date,
endDateTime: e.event.end.dateTime,
colorBackground: e.color.background,
colorForefground: e.color.foreground
})
});
});
How do you go about adding or removing elements from the add event modal. I need to add a select box and a radio button.
Grzegorz Bujański staff commented 2 years ago
At the moment we do not have the option to customize the modal content. If you want to add or remove modal elements, you have to do it on your own by modifying source files.
cwilliams pro premium priority commented 2 years ago
Can you please offer some guidance on how to do that?
mlazaru staff commented 2 years ago
Use our Webpack-starter. You can add your own changes to the source code and build your custom version of MDB using npm run buildMDB
cwilliams pro premium priority commented 2 years ago
Can you guys build us the modal we want for a small fee?
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 jQuery
- MDB Version: MDB4 4.20.0
- Device: Desktop
- Browser: Firefox
- OS: Windows
- Provided sample code: No
- Provided link: No