Topic: How to handle the click event for the created event?

sriramk18 priority asked 2 years ago

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.

enter image description here

Resources (screenshots, code snippets etc.)`



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);`

Grzegorz Bujański staff answered 2 years ago

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;
calendarElement.addEventListener('prev.mdb.calendar', (e) => {
  const months = calendarInstance.options.months;

sriramk18 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.

Grzegorz Bujański staff answered 2 years ago

You can use this code to handle click event:

document.querySelectorAll('.event').forEach((calendarEvent) => {
  calendarEvent.addEventListener("click", (e) => {
    const clickedEventData = => {
      return calendarEvent.key ==


This solution will allow you to get event data

sriramk18 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?

Kamila Pieńkowska staff answered 2 years ago

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 priority commented 2 years ago

Is there any way to handle the click event of the displayed calendar event?

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