我正在使用jan 12
更改dayRender
的单元格背景颜色。如何在同一个月更改一个单元格背景颜色?
var data=[{
'specialDay':'2017-01-12'
}];
console.log(data)
var $calendar = $('#calendar').fullCalendar({
defaultView: 'month',
dayRender: function (date, cell) {
var today = new Date(data[0].specialDay);
if (date.getDate() === today.getDate() && date.getMonth() === today.getMonth()) {
cell.css("background-color", "red");
}
}
});
http://jsfiddle.net/CYnJY/937/
编辑尝试使用仍然无法正常工作的循环:
var data = [{
'name': 'xxx',
'specialDay': [{
'day': '2017-01-12'
}, {
'day': '2017-01-19'
}]
}];
console.log(data)
var $calendar = $('#calendar').fullCalendar({
defaultView: 'month',
dayRender: function(date, cell) {
$.each(data.specialDay, function(index, element) {
alert(element.day)
var today = new Date(data[0].specialDay);
if (date.getDate() === today.getDate() && date.getMonth() === today.getMonth()) {
cell.css("background-color", "red");
}
})
}
});
答案 0 :(得分:1)
您的尝试有两个相对简单的问题,这两个错误都导致浏览器控制台中显示错误:
我看不出data
成为数组的任何原因。其中的SpecialDay是一个阵列,似乎足以满足您的需要。然后在你试图访问的地方data.specialDay
,它不存在(它必须是data[0].specialDay
,因为你必须访问data
数组的第一个对象,然后包含specialDay
属性。
new Date(data[0].specialDay);
日期实际上位于day
数组中对象的specialDay
属性中。将数组放入Date构造函数中没有多大意义 - 数组无法解析为日期。具有讽刺意味的是,在它正上方你已经提醒element.day
,这就是你需要输入阵列的东西,所以你离这个正确的解决方案并不远。
以下是代码的工作版本:
var data = { //data is now an object
'name': 'xxx',
'specialDay': [{
'day': '2017-11-12'
}, {
'day': '2017-11-19'
}]
};
console.log(data)
var $calendar = $('#calendar').fullCalendar({
defaultView: 'month',
dayRender: function(date, cell) {
$.each(data.specialDay, function(index, element) {
//alert(element.day)
var today = new Date(element.day); //put the correct variable into the Date constructor
if (date.getDate() === today.getDate() && date.getMonth() === today.getMonth()) {
cell.css("background-color", "red");
}
})
}
});
请参阅http://jsfiddle.net/CYnJY/947/了解演示。
另一个观察结果:您正在使用不再受支持的旧版fullCalendar(1.6.1)。目前的版本是3.6.2。我会建议你尽快升级。您可能需要进行少量更改,包括升级您的jQuery版本,包括moment.js等,但在文档中都很清楚。此链接提供了从版本1.x升级到2.0及更高版本的指南:https://fullcalendar.io/wiki/Upgrading-to-v2/