如果同一日期使用完整日历有超过 3 个事件，如何更改整个单元格的颜色

Question

我正在使用完整日历来生成日期和显示事件。一切正常，但我想要一个额外的功能，即如果它有超过 3 个事件，我想将单元格颜色更改为红色。如果日期超过 3 functions/events，则整个单元格颜色应更改为红色。这样用户就可以知道预订已满。我也贴了下面的截图

以下是我的代码：-

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



        },


    });
}

我的头像截图如下：-

Answer 1

我可以看到您已做出一些努力来尝试解决此问题（根据评论），但您似乎在实施 JavaScript 中建议的算法时遇到了一些问题。

回顾一下，做你想做的基本过程如下：

1) 等待日历中的所有事件完成加载

2) 获取当前可见的所有事件的列表

3) 保留一个计数器列表，记录特定日期发生的事件数。然后检查每个事件的开始日期，并为每个匹配事件将日期计数器加一。

4) 检查完所有事件后，查看每个计数器。如果其中任何一个记录了 3 个以上的事件，则更改日历中当天单元格的背景颜色。

这不是复杂的逻辑，但我可以看出您努力应用您的 JavaScript 知识将其转化为代码。

这里有一个简单的解决方案：

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

现场演示：http://jsfiddle.net/9zupvcfo/2/

如果同一日期使用完整日历有超过 3 个事件，如何更改整个单元格的颜色

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

html

css

jquery

fullcalendar

fullcalendar-3