Fullcalendar JS 输入点击

Question

我的页面上有完整日历。需要在顶部为每个日期添加输入，并且必须编辑输入中的数据。 问题是我无法点击我的输入。 它是例子： 完整日历图片

这是我的代码：

`const calendarEl = document.getElementById('calendar');
let calendar = null;

function addAdditionalDataToEventArea(){
    $('td .glyphicon-plus').remove();
    $('td .eventComment').remove();
    $('td .eventCommentCkbx').remove();
        $('td.fc-day').each(function (){
            $(this).prepend('<span data-date="'+$(this).data('date')+'" class="addTaskToDate glyphicon glyphicon-plus" aria-hidden="true"></span><input  type="text" data-date="'+$(this).data('date')+'" class="eventComment"><input  type="checkbox" data-date="'+$(this).data('date')+'" class="eventCommentCkbx">');
        });

    $('tr.fc-list-day').each(function (){
        $(this).find('.fc-list-day-cushion').prepend('<span data-date="'+$(this).data('date')+'" class="addTaskToDate  addTaskToDateListView glyphicon glyphicon-plus" aria-hidden="true"></span><input type="text"  data-date="'+$(this).data('date')+'" class="eventComment">');
    });
}

function initCalendarView(){
    calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        now: getTodayDate(),
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listDay,listWeek,listMonth,timeGridThreeDays'
        },
        views: {
            listDay: { buttonText: 'list day' },
            listWeek: { buttonText: 'list week' },
            listMonth: { buttonText: 'list month' },
            timeGridThreeDays: {
                type: 'listMonth',
                duration: { days: 3 },
                buttonText: '3 days'
            }
        },
        height: '95vh',
        firstDay:1,
        eventTimeFormat: {
            hour: '2-digit',
            minute: '2-digit',
            meridiem: false,
            hour12: false
        },
        timeFormat: 'H(:mm)',
        events: sJSUrlBookingEvents,
        datesSet:function (){
            setTimeout(function (){
                addAdditionalDataToEventArea();
            }, 1000);
            let currentDates = [];
            $('tr.fc-list-day').each(function (){
                currentDates.push($(this).data('date'));
            });
            let today = new Date();
            let dd = String(today.getDate()).padStart(2, '0');
            let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
            let yyyy = today.getFullYear();
            today = yyyy + '-' + mm + '-' + dd;
            if(currentDates.length !== 0){
                const targetDate = new Date(today);
                const closestDate = currentDates.reduce((a, b) => {
                    const dateA = new Date(a);
                    const dateB = new Date(b);
                    const targetTime = targetDate.getTime();
                    const timeA = dateA.getTime();
                    const timeB = dateB.getTime();
                    if (Math.abs(targetTime - timeA) < Math.abs(targetTime - timeB)) {
                        return a;
                    } else {
                        return b;
                    }
                });
                const closestDateSel = $('.fc-list-day[data-date='+closestDate+']');
                if(closestDateSel.length !== 0){
                    if(closestDateSel.length && closestDateSel.position().top){
                        let topPos = closestDateSel.position().top;
                        $(".fc-listMonth-view .fc-scroller").animate({ scrollTop: topPos }, { duration: 'medium', easing: 'swing' });
                        $('html,body').animate({
                            scrollTop: $(window).scrollTop() + topPos
                        });
                    }
                }
            }
        },
        loading: function(bool) {
            if (!bool){
                setTimeout(function (){
                    addAdditionalDataToEventArea();
                }, 1000);
            }
        },
        eventDidMount: function(info) {
            $(info.el).css('background',info.backgroundColor);
        },
        eventClick: function(info) {
            console.log('eventClick');
            info.jsEvent.preventDefault();
            $('.fc-event').removeClass('activeEvent');
            // change the border color
            $(info.el).addClass('activeEvent');
            const noteId = info.event.extendedProps.note_id;
            bookingEventData(noteId, true);
        },
        eventAfterAllRender: function (view) {
            let viewStartDate = $("#calendar").fullCalendar("getDate");
            let target = $(".fc-listMonth-view .fc-list-heading[data-date=" + viewStartDate.format("YYYY-MM-DD") + "]");
            if (target.length) {
                $(".fc-listMonth-view .fc-scroller").scrollTop(target.position().top);
            }
        },
    });
    calendar.render();
}

initCalendarView();`

它为每个日期添加

eventComment

类的输入，但问题是我无法单击此输入。 所以不能编辑输入内容。 但是可以点击跨度和复选框。所以这是输入元素的问题。

我该如何解决？请帮助，谢谢。