如何禁用单击突出显示的一天 fullcalendar.js？

Question

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

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

我的代码如下：

$('#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.js 'selectOverlap' 函数，因此它变得无法选择。

Answer 1

您可以使用 css 禁用此功能，将 css 类添加到预订日期并为该类添加此样式：

pointer-events: none; 

如果您想从 JavaScript 添加一个类，请使用：

Javascript：

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

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

CSS：

.bookedDate {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  border-radius: 50px;
  pointer-events: none;
}

查看示例here