使用FullCalendar,有没有办法以编程方式将特定日期的颜色与其他日期不同地着色?例如,在“月”或“周”视图中,我想将没有事件的日期着色为“红色”,而具有一些事件(但尚未完全安排)的日期着色为“黄色”。拥有全部日程的日期将正常着色(白色背景)。是否有任何回调或CSS标签可以利用来添加此行为?谢谢。
使用FullCalendar,有没有办法以编程方式将特定日期的颜色与其他日期不同地着色?例如,在“月”或“周”视图中,我想将没有事件的日期着色为“红色”,而具有一些事件(但尚未完全安排)的日期着色为“黄色”。拥有全部日程的日期将正常着色(白色背景)。是否有任何回调或CSS标签可以利用来添加此行为?谢谢。
According to Regin's answer here you can change the color by setting the dayRender event in the calendar like this:
$( "#calendar" ).fullCalendar(function() {
dayRender: function (date, cell) {
if ( !dateHasEvent(date) )
cell.css("background-color", "red");
else if ( dateHasEvent(date) )
cell.css("background-color", "yellow");
}
});
function dateHasEvent(date) {
// some code here
}
viewRender: function(view,element){
$.ajax({
url: //your custom url,
data: {start:view.start.format(),end:view.end.format()},
type: 'GET',
dataType: "json",
contentType: "application/json",
success: function (data) {
$.each(data, function(i) {
$('.fc-day[data-date="'+data[i]["date"]+'"]').css('background', Your Color Code);
});
}
});
},
$("div.fc-day-number:contains('15')").parent().addClass("vacation");
<style>
.fc-grid .vacation {
background-color:#F00;
}
</style>
FullCalendar似乎是一个非常强大的jquery日历,如果您编辑源代码,可能会在作者更新时给您带来一些痛苦。我的建议是给作者发送电子邮件,请求添加该功能或提供有关如何按需编辑字段的信息。
第二个想法是查看每种情况下生成的css选择器,并更改背景颜色以适应情况。这将使FullCal源代码保持更新,并为您提供所需内容。
希望这可以帮助到您。
$(document).ready(function(){
var days = {'2016-03-05': 1,'2016-03-09': 0,'2016-03-30': 1};
$("td, th").each(function(){
if(days[$(this).attr("data-date")]){
$(this).css("background-color","lime");
}
});
});
我在网上搜索了类似这样的通用解决方案,但没有成功。许多人都接近了,但这个确实做到了其他人所要求的。
希望它有所帮助。
唐
如果有人仍在寻找相同的解决方案,这里有一个JSFiddle。
JQuery
$(document).ready(function() {
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-07-04',
editable: true,
events: [{
title: 'All Day Event',
start: '2014-07-01'
}, {
title: 'Long Event',
start: '2014-07-07',
end: '2014-07-10'
}, {
id: 999,
title: 'Repeating Event',
start: '2014-07-09T16:00:00'
}, {
id: 999,
title: 'Repeating Event',
start: '2014-07-16T16:00:00'
}, {
title: 'Meeting',
start: '2014-07-12T10:30:00',
end: '2014-07-12T12:30:00'
}, {
title: 'Lunch',
start: '2014-07-12T12:00:00'
}, {
title: 'Birthday Party',
start: '2014-07-13T07:00:00'
}, {
title: 'Click for Google',
url: 'http://google.com/',
start: '2014-07-28'
}],
eventAfterAllRender: function(view) {
//Use view.intervalStart and view.intervalEnd to find date range of holidays
//Make ajax call to find holidays in range.
var fourthOfJuly = moment('2014-07-04', 'YYYY-MM-DD');
var holidays = [fourthOfJuly];
var holidayMoment;
for (var i = 0; i < holidays.length; i++) {
holidayMoment = holidays[i];
if (view.name == 'month') {
$("td[data-date=" + holidayMoment.format('YYYY-MM-DD') + "]").addClass('holiday');
} else if (view.name == 'agendaWeek') {
var classNames = $("th:contains(' " + holidayMoment.format('M/D') + "')").attr("class");
if (classNames != null) {
var classNamesArray = classNames.split(" ");
for (var j = 0; j < classNamesArray.length; j++) {
if (classNamesArray[j].indexOf('fc-col') > -1) {
$("td." + classNamesArray[j]).addClass('holiday');
break;
}
}
}
} else if (view.name == 'agendaDay') {
if (holidayMoment.format('YYYY-MM-DD') == $('#calendar').fullCalendar('getDate').format('YYYY-MM-DD')) {
$("td.fc-col0").addClass('holiday');
};
}
}
}
});
});
CSS
body {
margin: 0;
padding: 50px 0 0 0;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
}
#calendar {
width: 100%;
}
.holiday {
background: lightgray;
}
HTML
<div id="calendar"></div>