How to disable click on highlighted day fullcalendar.js?

Question

I have got a booking calendar which fetches events from a database table and highlights the specific dates that have events on, but how do I disable the click event for dates that have a booking.

For each day that is available I have a click event which opens a modal window with a booking form but don't want this to happen with the ones that have bookings.

My code is as follows:

$('#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');
    },
});

Thanks for you help.

My code has been updated above which has been tested where days have events on them then the date won't be selectable, the answer was to use the fullcalendar.js 'selectOverlap' function so it becomes unselectable.

Answer 1

You can disable this with css, add a css class to the booked dates and put this styling for that class:

pointer-events: none; 

If you want to add a class from JavaScript use:

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

See the example here