Fullcalendar - 需要为特定日期设置背景颜色
问题描述:
我想设置特定日子的背景颜色。我发现这工作:Fullcalendar - 需要为特定日期设置背景颜色
$('.fc-day15').css('backgroundColor','black');
但颜色上的网格16日,而不是一天。如果我知道这个月的第一个月的第一个星期的抵消额,我可以加上这个数字。
编辑:
我发现这工作:
var TheActualDay=15;
var DayOffset=($('#calendar').fullCalendar('getView').start.getTime()-$('#calendar').fullCalendar('getView').visStart.getTime())/(1000 * 60 * 60 * 24);
var DayNumber=(TheActualDay-1)+DayOffset;
$('.fc-day'+DayNumber.toString()).css('backgroundColor','black');
但是,有没有更多的缩写解决方案吗?
答
这是一个可行的解决方案。声明viewDisplay事件:
viewDisplay: function(view) {
if (view.name == 'month'){ //just in month view mode
var d = view.calendar.getDate(); //choise the date for cell customize
var cell = view.dateCell(d); //get the cell location for date
var bodyCells = view.element.find('tbody').find('td');//get all cells from current calendar
var _element = bodyCells[cell.row*view.getColCnt() + cell.col]; //get specific cell for the date
$(_element).css('background-color', '#FAA732'); //customize the cell
}
}
答
埃里克·巴尔加斯感谢您的例子,我做了一个简单的改变你的代码,以便在第一天和最后一天将与diferent颜色。
viewDisplay: function(view) {
if (view.name == 'month')
{ //just in month view mode
var start_date = view.start; // this is the first day of the current month (you can see documentation in Fullcalender web page)
var last_date = view.end; // this is actually the 1st day of the next month (you can see documentation in Fullcalender web page)
//var d = view.calendar.getDate(); //choise the date for cell customize
var start_cell = view.dateCell(start_date); //get the cell location for date
var last_cell = view.dateCell(last_date); //get the cell location for date
var bodyCells = view.element.find('tbody').find('td');//get all cells from current calendar
var _element_firstday = bodyCells[start_cell.row*view.getColCnt() + start_cell.col]; //get specific cell for the date
var _element_lastday = bodyCells[last_cell.row*view.getColCnt() + last_cell.col]; //get specific cell for the date
//alert(start_cell.row*view.getColCnt() + start_cell.col);
$(_element_firstday).css('background-color', 'black'); //customize the cell #40ACC8
$(_element_lastday).css('background-color', 'blue'); //customize the cell #40ACC8
}
},
答
eventRender: function (event, element, view) {
// like that
var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
view.element.find('.fc-day[data-date="' + dateString + '"]').css('background-color', '#FAA732');
// or that
var cell = view.dateToCell(event.start);
view.element.find('tr:eq(' + (cell.row + 1) + ') td:eq(' + cell.col + ')').css('background-color', '#FAA732');
}
有没有更好的解决办法?
需要更多解释。 – 2013-03-11 19:43:54
我上面做了一个修改。我不知道如何再创造一个像原文那样的更大的推荐区域。 – onemorecoke 2013-03-11 19:58:01
@blachawk:错! .fc-dayN表示该项目在当前日历视图中为第N天。它不会说它是当前显示月份的第N天!它将根据当月的哪一天开始变化。 – MarcinJuraszek 2013-03-11 23:20:24