Fullcalendar：更改特定日期的颜色答案

【问题标题】：Fullcalendar: Change the color for specific daysFullcalendar：更改特定日期的颜色
【发布时间】：2013-07-10 22:01:16
【问题描述】：

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

有什么方法可以操纵特定日子的背景吗？

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

【问题讨论】：

标签： css fullcalendar cell background-color

【解决方案1】：

我猜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");
        }
    },

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

.fc-past {
    background-color: silver;
}

【讨论】：

【解决方案4】：

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

$("#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/

【讨论】：

请参阅下面我的答案，以了解可能更快的基于 CSS 的解决方案：stackoverflow.com/a/36927481/270302
我只能在这里传递日期，我怎么能像 [10-12-2018,24-12-2018] 而不是 [10,24] 这样的月份和年份传递它

【解决方案5】：

    dayRender: function(date, cell){
        if (moment().diff(date,'days') > 0){
            cell.css("background-color","silver");
        }
    },

【讨论】：

【解决方案6】：

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

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

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

....

【讨论】：

这个帮助了我。因为dayRender 方法不能与 dayThreeView 一起正常工作

【解决方案7】：

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

    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 代码帮助我实现了这一点。谢谢雷金·拉森。

【讨论】：

【解决方案8】：

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

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

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

【讨论】：