skip to Main Content
<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


  1. Chosen as BEST ANSWER

    Answer:

    <FullCalendar
      allDaySlot={true}
      eventClick={(info) => this.handleEventClick(info)}
      events={[...milestones.map(milestone => ({
        id: milestone.id,
        title: milestone.description,
        start: milestone.expectedDate,
        allDay: true,
        type: 'milestone',
      })), ...this.state.reservations]}
    />
    
    // ...
    
    handleEventClick(info) {
      const { event } = info;
    
      if (event.extendedProps && event.extendedProps.type === 'milestone') {
        // Clicked on a milestone, do nothing or add your custom behavior
        console.log('Clicked on a milestone');
      } else if (event.type !== 'milestone') {
        // Clicked on a reservation, open the reservation info modal
        this.openReservationInfoModal(event);
      }
    }
    

  2. handleEventClick(info) {
    

    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

    if (event.extendedProps && event.extendedProps.type === 'milestone') {
    

    needs to be changed to

    if (info.event.extendedProps && info.event.extendedProps.type === 'milestone') {
    

    Fully revised function code:

    handleEventClick(info) {
    
      if (info.event.extendedProps && info.event.extendedProps.type === 'milestone') {
        // Clicked on a milestone, do nothing or add your custom behavior
        console.log('Clicked on a milestone');
      } else
        // Clicked on a reservation, open the reservation info modal
        this.openReservationInfoModal(event);
      }
    }
    

    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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search