我正在使用完整日历来生成日期并显示事件。 一切工作正常，但我想要一个附加功能，即如果单元格颜色超过 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();
},
});
}
Screenshot of my fronted is as below:-
我可以看到您已经做出了一些努力来尝试解决这个问题（根据评论），但您似乎在 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/