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：谢谢你的小提琴。这对我帮助很大。我想为星期六，星期日和一些特定假期上色，所以，我刚刚更新了小提琴来做： 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的回答： Add Italian holidays into fullcalendar

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

祝你好运约瑟夫

Answer 4

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

有些人甚至谈到黑客入侵并插入你自己的功能/触发器。我真的不喜欢这种方法，因为它可能不适用于更高版本，因此，我所做的是使用一个使用json feed的eventSource并设置颜色和TextColor事件属性，如下所示： / p>

$('#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);
?>

我希望这对你有用。

祝你好运约瑟夫

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

4 个答案: