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

sriramk18 priority asked 6 months 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.)

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


Grzegorz Bujański staff answered 6 months 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;
  console.log(months[calendarInstance.activeMoment.$M])
})
calendarElement.addEventListener('prev.mdb.calendar', (e) => {
  const months = calendarInstance.options.months;
  console.log(months[calendarInstance.activeMoment.$M])
})

sriramk18 priority commented 6 months 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 6 months 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 6 months ago


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 priority commented 6 months 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?


kpienkowska staff answered 6 months 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 6 months ago

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



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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