Как изменить цвет ячейки enitre, если одна и та же дата имеет более 3 событий, используя полный календарь

Я использую полный календарь для создания дат и отображения событий. все работает нормально, но мне нужна дополнительная функция, т.е. я хочу изменить цвет ячейки на красный, если в ней более 3 событий. Если у даты более 3 функций / событий, тогда цвет всей ячейки должен измениться на красный цвет. Чтобы пользователь мог знать, что бронирование заполнено. Я также приклеил скриншот ниже

Ниже мой код: -

 function clickmeforcalender(event) {

    debugger


    $('#calendar').show();
    var events = [];
    $.ajax({
        type: "GET",
        url: "/Booking/GetEvents",
        success: function (data) {
            $.each(data, function (i, a) {

                events.push({

                    title: a.Function_Name,
                    start: a.Function_Date1,
                    url: a.Booking_ID,
                    FSlot: a.Function_Slot,
                    MSlot: a.Marquee_Name,
                    Marquee_Slot: a.Marquee_Slot,
                    BPerson: a.Booking_Person,
                    BookedBy: a.Booking_Name,
                });

                $("#calendar").css("background-color", "WHITE");
            })
            var allEvents = $(".calendar").fullCalendar("clientEvents");

            var exists = 0;
            $.each(allEvents, function (index, value) {

                if (new Date(value.start).toDateString() === new Date(date).toDateString()) {
                    exists++;
                    if (exists == 2) {

                        value.css("background-color", "red");
                    }

                }

            });
            GenerateCalender(events);
        },

        error: function (error) {
            alert('failed');
        }
    });
};
function GenerateCalender(events) {
    debugger
    $('#calendar').fullCalendar({
        height: 550,

        header: {
            left: 'prev,next today',
            center: 'addEventButton',
            right: 'month,agendaWeek,agendaDay,listWeek',

        },

        defaultDate: new Date(),
        navLinks: true,
        editable: true,
        eventLimit: true,
        events: events,



        eventClick: function (calEvent, jsEvent, view) {
            selectedEvent = calEvent;
            //alert('Event: ' + calEvent.title);
            jsEvent.preventDefault();
            $('#myModal #eventTitle').text(calEvent.BookedBy + "-" + calEvent.title).css("font-weight", "Bold");
            var $description = $('<div/>');
            $description.append($('<p/>').html('<b>FucntionDate:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm")));
            //if (calEvent.end != null) {
            //    $description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
            //}
            $description.append($('<p/>').html('<b>EventName:</b>' + calEvent.title));
            if (calEvent.MSlot == 1) {
                $description.append($('<p/>').html('<b>MaqueeSlot:</b>' + "Full"));
            }
            else if (calEvent.MSlot == 2) {
                $description.append($('<p/>').html('<b>MaqueeSlot:</b>' + "Half"));

            }
            else {
                $description.append($('<p/>').html('<b>MaqueeSlot:</b>' + calEvent.MSlot));
            }
            if (calEvent.FSlot == 1) {
                $description.append($('<p/>').html('<b>FunctionSlot:</b>' + "Morning"));
            }
            else if (calEvent.FSlot == 2) {
                $description.append($('<p/>').html('<b>FunctionSlot:</b>' + "Evening"));
            }
            else {
                $description.append($('<p/>').html('<b>FunctionSlot:</b>' + calEvent.FSlot));
            }
            $description.append($('<p/>').html('<b>Booking Persons:</b>' + calEvent.BPerson));

            $('#myModal #pDetails').empty().html($description);

            var temp = $('#myModal').modal();



        },


    });
}

Снимок экрана моего интерфейса выглядит следующим образом: -