如果使用完整日历，如果同一日期有3个以上事件，则如何更改enitre单元格的颜色 [英] How to change the color of enitre cell if the same date has more than 3 events using full calendar
问题描述
我正在使用完整的日历来生成日期和显示事件. 一切正常，但是我想要一个附加功能，即如果它有3个以上的事件，我想将单元格颜色更改为红色. 如果日期具有3个以上的功能/事件，则整个单元格颜色应更改为红色.这样用户就可以知道预订已满. 我还粘贴了下面的屏幕截图
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
以下是我的代码:-
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实现建议的算法时遇到了一些问题
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)等待所有事件在日历中完成加载
1) wait for all events to finish loading in the calendar
2)获取当前可见的所有事件的列表
2) get a list of all events currently visible
3)保留一个计数器列表，该计数器记录特定日期发生的事件数.然后检查每个事件的开始日期，并为每个匹配的事件将该日期的计数器增加一.
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)检查所有事件后，查看每个计数器.如果其中任何一个记录的事件超过3个，则更改日历中该天的单元格的背景颜色.
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.
这不是复杂的逻辑，但是我可以看到您努力地运用JavaScript知识将其转换为代码.
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');
}
}
}
实时演示: http://jsfiddle.net/9zupvcfo/2/
这篇关于如果使用完整日历，如果同一日期有3个以上事件，则如何更改enitre单元格的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
