<FullCalendar
allDaySlot={true}
eventClick={(info) => this.openReservationInfoModal(info.event)}
events={[...milestones.map(milestone => ({
id: milestone.id,
title: milestone.description,
start: milestone.expectedDate,
allDay: true
})), ...this.state.reservations]}
what this code do is show in the calendar the milestones and the room reservations but my problem is that in the calendar when I click the reserved room it shows who reserved the room and the reason why it was reserved, only because of this code: eventClick={(info) => this.openReservationInfoModal(info.event)}
and thats what its suposed to do ; but when I click the milestone on the calendar it shows the same thing it shows when I click the reserved room, What I want is to change the code so that when I click the milestone on the calendar it shows nothing as if it was eventClick={null}
but when I click the reserved room it still shows who reserved the room and the reason why it was reserved, basically I want to separate the reservations eventClick from the milestones eventClick.
I asked chatgpt and it did this:
<FullCalendar
allDaySlot={true}
eventClick={(info) => this.handleEventClick(info.event)}
events={[...milestones.map(milestone => ({
id: milestone.id,
title: milestone.description,
start: milestone.expectedDate,
allDay: true,
type: 'milestone' // Add a type property to differentiate milestones
})), ...this.state.reservations]}
/>
// Event click handler
handleEventClick(event) {
if (event.extendedProps && event.extendedProps.type === 'milestone') {
// Handle click for milestones (do nothing or show a different modal)
// For example, you can add a specific action or leave it empty
console.log('Milestone clicked');
} else {
// Handle click for reservations
this.openReservationInfoModal(event);
}
}
// Method to open reservation info modal
openReservationInfoModal(reservation) {
// Add your logic to show reservation information
console.log('Reservation clicked', reservation);
// Display the modal with reservation information
}
but it still didnt work
2
Answers
Answer:
is needed, compared to the code supplied by chatGPT, because the event object is a sub-property of the argument passed to the handleEventClick callback (as per https://fullcalendar.io/docs/eventClick)
For the same reason
needs to be changed to
Fully revised function code:
Live demo (using vanilla JS rather than React, but the handleEventClick function can be written the same way in both): https://codepen.io/ADyson82/pen/vYPmjRp