17

我被一个工作中的项目困住了。我需要更改某些日子的背景颜色。这是一个用户应该看到的日历，哪些日子可用，哪些不可用。我发现有一个名为“data-date”的属性，但我没有找到使用它的可能性。

有没有办法操纵特定日子的背景？

我认为必须有一种方法，因为显示当前日期的单元格也有另一种颜色。

4

8 回答 8

39

对于视图month，您可以通过提供函数basicWeek来更改天数的呈现。例如：basicDaydayRender

$("#calendar").fullCalendar({
    dayRender: function (date, cell) {
        cell.css("background-color", "red");
    }
});

文档dayRender可在此处获得： http: //arshaw.com/fullcalendar/docs/display/dayRender/

这是关于 jsfiddle 的一个工作示例：http: //jsfiddle.net/kvakulo/CYnJY/4/

于 2013-07-12T12:34:18.130 回答
9

对于那些希望简单地更改过去日期的颜色的人，.fc-past请在您的 css 中定位并添加一个background-color属性。例如，：

.fc-past {
    background-color: silver;
}
于 2016-04-29T00:12:26.327 回答
8 
    dayRender: function(date, cell){
        if (moment().diff(date,'days') > 0){
            cell.css("background-color","silver");
        }
    },
于 2014-10-21T17:50:29.810 回答
4

如果有人想查询以前一整天红色（或任何其他）颜色的完整日历，那么这就是代码。

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

    defaultView: 'month',

    dayRender: function (date, cell) {
       var check = $.fullCalendar.formatDate(date,'yyyy-MM-dd');
                    var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd');
                    if (check < today) {
                        cell.css("background-color", "red");
                    }
    }
});

Regin Larsen 代码帮助我实现了这一点。谢谢雷金·拉森。

于 2014-01-09T12:54:47.500 回答
4

为什么不使用“数据日期”属性？

$("#calendar").fullCalendar(function() {

  viewRender: function() {
    $("[data-date="+$.fullCalendar.formatDate(new Date(), "yyyy-MM-dd")+"]").css("background-color", "red");
},

....
于 2014-01-11T01:12:24.243 回答
1

使用外部库时，您应该尽量不要利用库生成的任何内容。因为在下一个版本中，如果他们更改了库内部的工作方式，该库仍将向后兼容，但您的代码将停止工作。所以尽量使用库 API 而不是做 hack。

回答您的问题，一种方法是在所有不可用的日子里添加一个新事件。这可以通过创建事件对象并执行 renderEvent(.fullCalendar('renderEvent', event [, stick ])) 来完成。在创建事件对象时，将背景颜色指定为您想要的颜色，并将颜色、文本颜色、边框颜色设置为与背景相同（如果您不希望它可见）。

编辑：Regin Larsen 的回答似乎更好。我没有在文档中注意到这一点。

于 2013-07-12T12:39:29.167 回答
1

要使用特定日期的日期参数进行比较：

$("#calendar").fullCalendar({
    dayRender: function (date, cell) {
        if (date.isSame('2016-08-04')) {
           cell.css("background-color","red");
        }
    }
});

isSame 来自 moment.js，fullcalendar 使用它：http: //momentjs.com/docs/#/query/is-same/

于 2016-08-04T14:15:26.653 回答
0

我猜 getDate 不起作用，请改用 moment。

里面var calendar = $('#calendar').fullCalendar({ ... }

dayRender: function (date, cell) {
        var today = moment('2018-06-22T00:00Z');
        if (date.isSame(today, "day")) {
            cell.css("background-color", "blue");
        }
    },
于 2018-06-03T11:59:12.243 回答