title: How to change the color of enitre cell if the same date has more than 3 events using full calendar
body: <p>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</p>
  
  <p><strong>Following is my code :-</strong></p>
  
  <pre><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 = $('&lt;div/&gt;');
              $description.append($('&lt;p/&gt;').html('&lt;b&gt;FucntionDate:&lt;/b&gt;' + calEvent.start.format("DD-MMM-YYYY HH:mm")));
              //if (calEvent.end != null) {
              //    $description.append($('&lt;p/&gt;').html('&lt;b&gt;End:&lt;/b&gt;' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
              //}
              $description.append($('&lt;p/&gt;').html('&lt;b&gt;EventName:&lt;/b&gt;' + calEvent.title));
              if (calEvent.MSlot == 1) {
                  $description.append($('&lt;p/&gt;').html('&lt;b&gt;MaqueeSlot:&lt;/b&gt;' + "Full"));
              }
              else if (calEvent.MSlot == 2) {
                  $description.append($('&lt;p/&gt;').html('&lt;b&gt;MaqueeSlot:&lt;/b&gt;' + "Half"));
  
              }
              else {
                  $description.append($('&lt;p/&gt;').html('&lt;b&gt;MaqueeSlot:&lt;/b&gt;' + calEvent.MSlot));
              }
              if (calEvent.FSlot == 1) {
                  $description.append($('&lt;p/&gt;').html('&lt;b&gt;FunctionSlot:&lt;/b&gt;' + "Morning"));
              }
              else if (calEvent.FSlot == 2) {
                  $description.append($('&lt;p/&gt;').html('&lt;b&gt;FunctionSlot:&lt;/b&gt;' + "Evening"));
              }
              else {
                  $description.append($('&lt;p/&gt;').html('&lt;b&gt;FunctionSlot:&lt;/b&gt;' + calEvent.FSlot));
              }
              $description.append($('&lt;p/&gt;').html('&lt;b&gt;Booking Persons:&lt;/b&gt;' + calEvent.BPerson));
  
              $('#myModal #pDetails').empty().html($description);
  
              var temp = $('#myModal').modal();
  
  
  
          },
  
  
      });
  }
  </code></pre>
  
  <p>Screenshot of my fronted is as below:-
  <a href="https://i.stack.imgur.com/7GgWf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7GgWf.png" alt="enter image description here"></a></p>