How to change the color of enitre cell if the same date has more than 3 events using full calendar

Question

I am using full calendar to generate dates and show events. everything is working fine but I want an additional feature i.e I want to change the cell color to red if it has more than 3 events. If a date has more than 3 functions/events then the entire cell color should changed to red color. So that user can know the booking is full. I have also pasted the screenshot below

Following is my code :-

 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();



        },


    });
}

Screenshot of my fronted is as below:-

Answer 1

I can see you have made some effort to try and solve this (as per the comments) but you appear to have had some problems implementing the suggested algorithm in JavaScript.

To recap, the basic process for doing what you want is as follows:

1) wait for all events to finish loading in the calendar

2) get a list of all events currently visible

3) Keep a list of counters which record how many events occur on a particular day. Then check the start date of each event, and increase the counter for the date by one for each matching event.

4) Once all the events are checked, look at each counter. If any of them records more than 3 events, then change the background colour of the cell for that day in the calendar.

This is not complicated logic, but I can see that you struggled to apply your JavaScript knowledge to turn it into code.

Here is a simple solution for doing it:

eventAfterAllRender: function(view) { //wait till all events have loaded and rendered
  //get all events
  var events = $("#calendar").fullCalendar("clientEvents");
  var dates = {}; //this object will hold the list of dates on which events occur, and the number of events occurring on those dates

  //loop through all the events
  events.forEach(function(ev, index) {
    var startDateStr = ev.start.format("YYYY-MM-DD");
    //either 
    //a) create a new entry for the event's start date and set it to 1, OR
    //b) increase the count of the entry for that date, if it already exists
    // this will build up a list of all dates on which events start, and record how many events start on each of those days
    //it does this by using an empty object, and then adding keys to that object - the key is the date, and the value is the count of events for that date
    dates[startDateStr] = (dates[startDateStr] + 1 || 1);
  });

  //log for debugging / illustration
  console.log(dates);

  //loop through the list of dates which contain events
  for (var dt in dates) {
    //check the count of events for that date. If the count is 3 or more, then change the cell colour for that date in fullCalendar
    if (dates[dt] > 3) {
      $('#calendar').find('.fc-day[data-date="' + dt + '"]').css('background-color', '#FAA732');
    }
  }
}

Live demo: http://jsfiddle.net/9zupvcfo/2/