jQuery fullCalendar为单元格设置背景色

Question

我想为日期为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');

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

Answer 1

CSS解决方案帮助我解决了这个问题：

对于今天日期：-

.fc-today {
        background-color: #ffffff;
 }
 .ui-widget-content .ui-state-highlight {
        background-color: #fff !important;
        background-image: none;
 }

对于其他天：

.fc-day {
        background-color: green;
}

祝你好运。

Answer 2

试试这个：

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');
    }
});

请参阅Fiddle

Answer 3

Fergoso：谢谢你的Fiddle。这对我帮助很大。我想给周六、周日和一些特定的假期涂上颜色，所以，我只是更新了Fiddle来做这件事：http://jsfiddle.net/CYnJY/203

这是我在那里唯一改变的东西：

//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） 假期应该来自数据库，类似于milz的答案：将意大利假期添加到完整日历中

附言：这应该是对Fergoso解决方案的评论，但由于我没有足够的声誉，我不能将其作为评论发布。

致以最良好的问候Josef

Answer 4

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

有些人甚至谈到了破解源代码并插入自己的函数/触发器。我真的不喜欢这种方法，因为它可能不适用于以后的版本，所以，我所做的是使用eventSource，它使用json提要并设置颜色和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();
    //Holidays (I included Saturdays and Sundays as well)
    $events[] = array(
        //You can add an id if you want. This is useful if you
        //want to delete the event afterwards
        "id" => 1,
        //Make sure to use utf8_encode if you have special chars
        "title" => utf8_encode("New year"),
        //background and text color for holidays
        "color" => "#C0C0C0",
        "textColor" => "#000000",
        //I only added this fields in order to be able to
        //compare my dates with the ones given by FullCalendar.
        //With a database you won't need this, ie: in mysql you
        //only need to pass the start and end date strings
        "start_date_time" => new DateTime('2014-01-01 00:00:00'),
        "end_date_time" => new DateTime('2014-01-01 23:59:59'),
        //Make sure to do this if you aren't using the allDay Slot
        "allDay" => False,
        //This is a flag I included to differentiate this event
        //from the user events. I'm dynamically deleting events
        //when the user clicks on them, but this excludes holidays
        "holiday" => True
    );
    //Add some more here
    //...
    //Now your own events
    $events[] = array(
        "id" => 30,
        "title" => utf8_encode("Team meeting"),
        "start_date_time" => new DateTime('2014-01-08 10:00:00'),
        "end_date_time" => new DateTime('2014-01-08 10:30:00'),
    );
    //The following is only to simulate a search based
    //on the start and end dates (It is inefficient, I know, but it's
    //a proof of concept as I said) 
    $events_for_web = array();
    foreach ($events as $event)
    {
        if (($start <= $event["start_date_time"]) && ($event["end_date_time"] <= $end))
        {
            //start_date_time and end_date_time must be converted to a string
            //because this is the format supported by FullCalendar
            $event["start"] = $event["start_date_time"]->format('Y-m-d H:i:s');
            $event["end"] = $event["end_date_time"]->format('Y-m-d H:i:s');
            $events_for_web[] = $event;
        }
    }
    //Now just output everything as json, which is what
    //FullCalendar expects:
    echo json_encode($events_for_web);
?>

我希望这对你有用。

致以最良好的问候Josef