Fullcalendar 如何设置单个单元格的背景颜色而不是事件的背景颜色?
我不希望为圣诞节和复活节之类的活动创建事件,而是希望能够为受影响的日期单元格着色,甚至可能为每个事件创建一个灰色半透明文本。在FullCalendar中有什么简单的方法可以做到这一点吗 编辑Fullcalendar 如何设置单个单元格的背景颜色而不是事件的背景颜色?,fullcalendar,Fullcalendar,我不希望为圣诞节和复活节之类的活动创建事件,而是希望能够为受影响的日期单元格着色,甚至可能为每个事件创建一个灰色半透明文本。在FullCalendar中有什么简单的方法可以做到这一点吗 编辑 有人向我指出,fc state HIGHTING今天用于突出显示fc,因此,也许可以做类似的事情,将css类应用于单元格,并将其定义为“公共假日颜色”。一个想法。问题是如何将此类应用于相关日期,以便在FC内工作而不破坏任何内容。当doc就绪时,使用js函数选择所有TDs,并将数据日期添加到所需的TDs中,然
有人向我指出,fc state HIGHTING今天用于突出显示fc,因此,也许可以做类似的事情,将css类应用于单元格,并将其定义为“公共假日颜色”。一个想法。问题是如何将此类应用于相关日期,以便在FC内工作而不破坏任何内容。当doc就绪时,使用js函数选择所有TDs,并将数据日期添加到所需的TDs中,然后将CSS类添加到这些TDs中。我不知道它是否有效,只是一个想法。这可以使用。单独调用ajax查找所有假日,然后更改td的颜色。使用FC 2.0.1完成的六月一日的月份和假日示例:
eventAfterAllRender:函数(视图){
//使用view.intervalStart和view.intervalEnd查找假日的日期范围
//进行ajax调用以查找范围内的假期。
var fourthOfJuly=时刻('2014-07-04','YYYY-MM-DD');
var假日=[7月4日];
假期时刻;
对于(var i=0;i-1){
$(“td.+classNamesArray[i]).addClass('holiday');
打破
}
}
}
}else if(view.name==“agendaDay”){
if(holidayMoment.format('YYYY-MM-DD')=$('#calendar').fullCalendar('getDate').format('YYYY-MM-DD')){
$(“td.fc-col0”).addClass(“假日”);
};
}
}
}
是的,这也是我的想法所在。有点乱。看起来,至少在过渡期间,必须为公共假日等创建不可修改的事件。您使用的是什么版本的fce?您希望在什么视图中执行此操作?版本:FC 2.0.1。视图:月、代理日期、代理周。
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 i = 0; i < classNamesArray.length; i++) {
if(classNamesArray[i].indexOf('fc-col') > -1) {
$("td." + classNamesArray[i]).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');
};
}
}
}