Javascript jQuery fullCalendar设置单元格的背景色

我想为日期为2014-10-22的单元格设置背景色。我找到了一个解决方案：

         date = new Date(y,m,d);
        date = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
        $('.fc-day[data-date="'+ date +'"]').css('background-color', 'black');

但它不起作用。有什么想法吗？

试试这个：

var $calendar = $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },

    defaultView: 'month',    
    dayRender: function (date, cell) {
         date = new Date();
         date = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
         $('.fc-day[data-date="'+ date +'"]').addClass('cellBg');
    }
});

请参见尝试以下操作：

var $calendar = $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },

    defaultView: 'month',    
    dayRender: function (date, cell) {
         date = new Date();
         date = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
         $('.fc-day[data-date="'+ date +'"]').addClass('cellBg');
    }
});

---

参见

费戈索：谢谢你的小提琴。这对我帮助很大。我想给周六、周日和一些特定的节日涂上颜色，所以我只是更新了小提琴：

这是我在那里唯一改变的事情：

//Month is zero-based, so, 9 is october
var holiday_date = new Date(2014,9,20);
var date_as_locale = date.toLocaleDateString();
if (date_as_locale == holiday_date.toLocaleDateString()) {
    enter code here`cell.css("background-color", "red");
}
holiday_date = new Date(2014,9,27);
if (date_as_locale == holiday_date.toLocaleDateString()) {
    enter code here`cell.css("background-color", "red");
}
var day_of_the_week = date.getDay();
if ((day_of_the_week == 0) || (day_of_the_week == 6)){
    cell.css("background-color", "red");
}

我只有两个假期：2014年10月20日和27日。我现在知道有一种更好的方法可以做到这一点，但现在它可以用于演示目的。我将在稍后对其进行改进，以便： 1） 假期必须独立于年份，即：所有年份都必须选择1月1日，而不仅仅是2014年。 2） 假期应该来自数据库，类似于米尔兹的答案：

PS：这应该是对费戈索解决方案的评论，但由于我没有足够的声誉，我不能将其作为评论发表

致意

---

约瑟夫：谢谢你的小提琴。这对我帮助很大。我想给周六、周日和一些特定的节日涂上颜色，所以我只是更新了小提琴：

这是我在那里唯一改变的事情：

//Month is zero-based, so, 9 is october
var holiday_date = new Date(2014,9,20);
var date_as_locale = date.toLocaleDateString();
if (date_as_locale == holiday_date.toLocaleDateString()) {
    enter code here`cell.css("background-color", "red");
}
holiday_date = new Date(2014,9,27);
if (date_as_locale == holiday_date.toLocaleDateString()) {
    enter code here`cell.css("background-color", "red");
}
var day_of_the_week = date.getDay();
if ((day_of_the_week == 0) || (day_of_the_week == 6)){
    cell.css("background-color", "red");
}

我只有两个假期：2014年10月20日和27日。我现在知道有一种更好的方法可以做到这一点，但现在它可以用于演示目的。我将在稍后对其进行改进，以便： 1） 假期必须独立于年份，即：所有年份都必须选择1月1日，而不仅仅是2014年。 2） 假期应该来自数据库，类似于米尔兹的答案：

PS：这应该是对费戈索解决方案的评论，但由于我没有足够的声誉，我不能将其作为评论发表

致意

---

Josef

@user3058157希望在议程视图中突出显示假日。不幸的是，根据FullCalendar 2.1.1的文档，dayRender回调仅适用于月份和基本视图。我尝试了议程观点，但没有成功

有些人甚至谈到黑客攻击源代码并插入自己的函数/触发器。我真的不喜欢这种方法，因为它可能不适用于更高版本，因此，我所做的是使用一个eventSource，它使用json提要并设置color和TextColor事件属性，如下所示：

$('#calendar').fullCalendar({
    //Add your configuration properties here
    //...
    eventSources: [
    {
        url: 'get_events.php',
        type: 'POST',
        error: function() {
        alert('there was an error while fetching events!');
    }
});

然后您只需创建get_event.php文件。我的是这样的（请注意，这是一个概念证明，原始数据实际上应该来自一个数据库，我知道这是没有效率的，你甚至可以根据开始和结束日期只获取你想要的事件，而不是每次调用php页面时创建所有事件）：

$events=array（）；
//假期（我也包括周六和周日）
$events[]=数组(
//如果需要，可以添加id。如果
//要在以后删除该事件吗
“id”=>1，
//如果您有特殊字符，请确保使用utf8_编码
“标题”=>utf8_编码（“新年”），
//假日背景和文本颜色
“颜色”=>“#C0C0”，
“textColor”=>“#000000”，
//我添加此字段只是为了能够
//将我的日期与FullCalendar给出的日期进行比较。
//有了数据库，你就不需要这个了，例如：在mysql中，你
//只需要传递开始和结束日期字符串
“开始日期时间”=>新日期时间（'2014-01-01 00:00:00'），
“结束日期时间”=>新日期时间（'2014-01-01 23:59:59'），
//如果您不使用全天时段，请确保这样做
“全天”=>错误，
//这是我用来区分此事件的标志
//从用户事件。我正在动态删除事件
//当用户单击它们时，但这不包括节假日
“假日”=>正确
);
//在这里再加一些
//...
//现在是你自己的事情
$events[]=数组(
“id”=>30，
“标题”=>utf8_编码（“团队会议”），
“开始日期时间”=>新日期时间（'2014-01-08 10:00:00'），
“结束日期时间”=>新日期时间（'2014-01-08 10:30:00'），
);
//以下仅用于模拟基于搜索的
//在开始和结束日期（我知道这是低效的，但它是
//概念证明（如我所说）
$events_for_web=array（）；
foreach（$events作为$event）
{
if（$start格式（'Y-m-dh:i:s'）；
$events_for_web[]=$event；
}
}
//现在只需将所有内容输出为json，这就是
//FullCalendar期望：
echo json_encode（$events_for_web）；
?>

我希望这对你有用

致意

---

Josef

@user3058157希望在议程视图中突出显示假日。不幸的是，根据FullCalendar 2.1.1的文档，dayRender回调仅适用于月份和基本视图。我尝试了议程视图，但没有成功

有些人甚至谈到黑客攻击源代码并插入您自己的函数/触发器。我真的不喜欢这种方法，因为它可能不适用于更高版本，因此，我所做的是使用一个eventSource，它使用json提要并设置color和TextColor事件属性，如下所示：

$('#calendar').fullCalendar({
    //Add your configuration properties here
    //...
    eventSources: [
    {
        url: 'get_events.php',
        type: 'POST',
        error: function() {
        alert('there was an error while fetching events!');
    }
});

然后您只需创建get_event.php文件（请注意，这是一个概念证明，原始数据实际上应该来自数据库，我知道这是没有效率的，您甚至可以根据开始和结束日期只获取所需的事件，而不是每次调用php页面时创建所有事件）：

$events=array（）；
//假期（我也包括周六和周日）
$events[]=数组(
//如果需要，可以添加id。如果
//要在以后删除该事件吗
“id”=>1，
//如果您有特殊字符，请确保使用utf8_编码
“标题”=>utf8_编码（“新年”），
//背景和文本颜色