Topic: How to handle the click event for the created event?
Expected behavior
Actually, I am creating a screen to book appointment for doctor.
I need to show the time slot after i click on a event in the calendar. Please give me a sample code to attach a event to the calendar events to show the modal pop up with the time slot or modify the edit modal with a customized modal.
Actual behavior
Not able to find material for custom modal for the calendar control.
Resources (screenshots, code snippets etc.)
https://mdbootstrap.com/snippets/standard/sriramk18/3979010`
Html:
JavaScript:
const events = [ { summary: 'JS Conference', start: { date: Calendar.dayjs().format('DD/MM/YYYY'), }, end: { date: Calendar.dayjs().format('DD/MM/YYYY'), }, color: { background: '#cfe0fc', foreground: '#0a47a9', }, }];
const calendarElement = document.getElementById('calendar');const calendarInstance = Calendar.getInstance(calendarElement);calendarInstance.addEvents(events);`
You can use this code to handle click event:
document.querySelectorAll('.event').forEach((calendarEvent) => {
calendarEvent.addEventListener("click", (e) => {
const clickedEventData = calendarInstance.events.filter((calendarEvent) => {
return calendarEvent.key == e.target.dataset.mdbEventKey
})[0];
console.log(clickedEventData);
})
})
This solution will allow you to get event data
sriramk18 pro premium priority commented 2 years ago
1) Currently when i click on the calendar day the add event modal popup comes.Is it possible to handle the click event of the calendar day?
2) How to get the next month and current month on the "next.mdb.calendar" event?Give me the sample code?
We do not provide option to customize modal in calendar plugin at the moment.
We are planning to add this feature in the near future.
sriramk18 pro premium priority commented 3 years ago
Is there any way to handle the click event of the displayed calendar event?
ad 1) Can you tell me more about this? What exactly do you want to do? Block modal?
ad 2) You can use calendar instance data to get the current month:
calendarElement.addEventListener('next.mdb.calendar', (e) => {
const months = calendarInstance.options.months;
console.log(months[calendarInstance.activeMoment.$M])
})
calendarElement.addEventListener('prev.mdb.calendar', (e) => {
const months = calendarInstance.options.months;
console.log(months[calendarInstance.activeMoment.$M])
})
sriramk18 pro premium priority commented 2 years ago
When i click on a date block, the add event dialog box opens and i am able to enter the event new event and the event gets added the date block.
What is the event to handle the click event of the date block, so that i can open my custom dialog box?
Grzegorz Bujański staff commented 2 years ago
Currently it is not possible to customize the content of a modal or to block it so that the modal does not appear. We are working on adding the ability to customize the modal content.
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 4.0.0
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: Yes