Javascript 如何禁用单击突出显示的day fullcalendar.js？

我有一个预订日历，它从数据库表中获取事件，并突出显示有事件的特定日期，但是如何对有预订的日期禁用单击事件

对于可用的每一天，我都会有一个点击事件，它会打开一个带有预订表单的模式窗口，但我不希望在有预订的情况下发生这种情况

我的代码如下：

$('#calendar').fullCalendar({
events: "inc/fetch-bookings.php",
eventAfterAllRender : function(view) {

    //Loop through all event to set the highlight and onclick url
    $(".fc-event-container").each(function(){

    // Get this day of the week number
    var weekDayIndex = $(this).index();
    // Get the calendar row
    var row = $(this).closest(".fc-row");
    // Get this date
    var date = row.find(".fc-day-top").eq(weekDayIndex).attr("data-date");
    // Add highlight and data-date
    row.find(".fc-day").eq(weekDayIndex)
        .addClass("highlight");
    });
    
},
selectOverlap: function(event) {
        $('#modalbook').fadeOut();
            $('.modaloverlay').fadeOut();
      },
    selectable: true,
    selectHelper: true,
    firstDay: 1,
    longPressDelay: 0,
    eventLongPressDelay: 0,
    selectLongPressDelay: 0,
    header: {
        left: 'prev',
        center: 'title',
        right: 'next'
    },
    viewRender: function(currentView){
        var minDate = moment();
        if (minDate >= currentView.start && minDate <= currentView.end) {
            $(".fc-prev-button").hide();
        }
        else {
            $(".fc-prev-button").show();
        }
    },
    showNonCurrentDates: false,
    fixedWeekCount: false,
    selectAllow: function(info) {
        if (info.start.isBefore(moment().add(-1, 'days'))) {
            return false; return true;
        }
    },
    select: function(date) {
        var timestamp = Number(new Date());
        var date = date.format();
        $("span.bookingdate").text(date);
        $('#bookingdate').val(date);

        $('#modalbook').fadeIn(600);
        $('.modaloverlay').fadeIn(600);
        $('body').addClass('modalopn');
    },
});

$（“#日历”）.fullCalendar({
事件：“inc/fetch bookings.php”，
eventAfterAllRender:函数（视图）{
//循环所有事件以设置突出显示和onclick url
$（“.fc事件容器”）。每个（函数（）{
//获取每周的这一天编号
var weekDayIndex=$（this.index（）；
//获取日历行
变量行=$（此）.closest（“.fc行”）；
//得到这个日期
var date=行.find（“.fc day top”）.eq（工作日索引）.attr（“数据日期”）；
//添加突出显示和数据日期
行查找（“.fc day”）.eq（工作日索引）
.addClass（“突出显示”）；
});
},
选择重叠：功能（事件）{
$（#modalbook'）.fadeOut（）；
$（'.modaloverlay'）.fadeOut（）；
},
是的，
selectHelper:对，
第一天：1，
长按延迟：0，
eventLongPressDelay:0，
选择长按延迟：0，
标题：{
左：'上一页'，
中心：'标题'，
右图：“下一步”
},
viewRender:函数（currentView）{
var minDate=力矩（）；
如果（minDate>=currentView.start&&minDate您可以使用css禁用此功能，请将css类添加到预定日期，并为该类设置此样式：

pointer-events: none; 

如果要从JavaScript添加类，请使用：

Javascript:

const bookedDates = document.querySelectorAll('.fc-day-top');

bookedDates.forEach(function (bookedDate) {
    bookedDate.classList.add('bookedDate');
});

CSS:

查看示例
谢谢你的回答。我应该在我的代码中的什么地方添加这一行？在你的css文件中，首先检查预定日期，看看它是否有唯一的类。然后将代码添加到该类中。看这里。我创建了一个示例。如果你删除了
指针事件
，你可以单击该项。这似乎仍然不起作用作为一个模式，我添加了以下内容（row.find（“.fc day top span”）.eq（weekDayIndex）.addClass（'booked'）；）并将CSS应用于指针事件。您不需要使用jQuery添加它们，只需像我给出的示例那样将其添加到CSS中即可。
.bookedDate {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  border-radius: 50px;
  pointer-events: none;
}