eventClick not fired in fullCalendar custom view angular

Question

I created a custom view for my angular app using full calendar custom views via js api. but i can't find a way to trigger the eventClick when clicking on an event from the custom view. i created the custom view js file and here is my code

const CustomViewConfig = {
    classNames: ['custom-view'],
    content: function (props) {
        const startDate = formatDate(props.dateProfile.activeRange.start)
        let segs = sliceEvents(props, true); // allDay=true
   
        let html =
            '<div class="custom-view-body">' +
                segs.map(elt => {
                    return `<div class="fc-daygrid-event-harness ${elt.def.extendedProps.event.date_from == startDate ? 'half-day-event' : ''}">` +
                                `<a class="fc-daygrid-event fc-daygrid-block-event fc-h-event fc-event fc-event-draggable fc-event-end fc-event-past pending-event ${elt.def.extendedProps.event.is_checked_in ? 'checkedin-event' :  elt.def.extendedProps.event.is_checked_out ? 'checkedout-event' : 'pending-event'}">` +
                                    '<div class="fc-event-main">' +
                                        `<span class="${elt.def.extendedProps.event.location == 'airbnb' ? 'fab fa-airbnb' : elt.def.extendedProps.event.location == 'booking.com' ? '': 'reservation-otonomus-logo'}"></span>`+
                                        '<span class="event-text">' +
                                            elt.def.extendedProps.event.customerInfo.first_name +
                                            ' ' +
                                            elt.def.extendedProps.event.customerInfo.last_name +
                                                ' - ' +
                                            elt.def.extendedProps.event.apartment +
                                                ' - ' +
                                            elt.def.extendedProps.event.price +
                                            ' USD' +
                                        '</span>' +
                                        `<span class="${  elt.def.extendedProps.event.status == 'cleaning' ? 'reservation-absolute cleaning' : elt.def.extendedProps.event.status == 'maintenance' ? 'reservation-absolute maintenance' : 'reservation-absolute'}"></span>`+
                                    '</div>'+
                                '</a>'+
                            '</div>'
                }).join('') +
            '</div>'
        return { html: html };
    }
};


export default createPlugin({
    views: {
        custom: CustomViewConfig,
    }    
});

when you click on the event a pop up should open with the event info but i can't find a way to trigger the eventClick function.

this is how i use the custom view in my calendar component: HTML:

 <full-calendar #fullcalendar [options]="options"></full-calendar>

ts FILE:

  this.options = {
      plugins: [dayGridPlugin, customViewPlugin],
      initialView: 'custom',
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,dayGridWeek,timeGridDay,custom'
      },
      views: {
        custom: {
          buttonText: 'day'
        }
      },
      slotEventOverlap: false,
      editable: true,
      selectable: true,
      allDaySlot: false,
      selectMirror: true,
      dayMaxEvents: true,
      datesSet: this.setDates.bind(this),
      eventClick: (e: EventClickArg) => {
        console.log(e, 'eeeee');
      }
    };