如何禁用點擊突出顯示的日子 fullcalendar.js？

Question

我有一個預訂日歷，它從數據庫表中獲取事件並突出顯示有事件的特定日期，但是如何禁用有預訂日期的點擊事件。

對於可用的每一天，我都有一個點擊事件，它打開一個帶有預訂表格的模態 window 但不希望這種情況發生在有預訂的人身上。

我的代碼如下：

$('#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' function 所以它變得不可選擇。

Answer 1

您可以使用 css 禁用此功能，將 css class 添加到預訂日期並將此樣式設置為 ZA2F2ED4F8EBC2CBBD4C21A2

pointer-events: none; 

如果要從 JavaScript 添加 class ，請使用：

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;
}

請參閱此處的示例