Fullcalendar：更改特定日期的颜色

Question

我在工作中遇到了一个问题，需要完成一个项目。我需要更改某些日期的背景颜色。这是一个用户可以查看哪些日期可用和不可用的日历。我发现有一个叫做"data-date"的属性，但我没有找到使用它的方法。

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

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

- Dr. Gadget

Answer 1

对于 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/

- Regin Larsen

---

请看我下面的答案，其中提供了基于CSS的解决方案，这可能会更快：https://dev59.com/4mMm5IYBdhLWcg3wbunb#36927481 - Avindra Goolcharan

我只能传递日期，我如何传递带有月份和年份的日期，例如 [10-12-2018,24-12-2018] 而不是 [10,24]？ - abhi krishnan

Answer 2

对于那些只想改变过去日期颜色的人，可以在你的css中针对.fc-past进行操作，并添加background-color属性。例如：

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

- Avindra Goolcharan

Answer 3

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

- radmonius

Answer 4

如果有人想要在jquery fullcalendar中将所有前一天涂成红色（或其他颜色），则可以使用以下代码。

    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帮助我实现了这个代码。感谢Regin Larsen。

- gmwraj

Answer 5

为什么不使用"data-date"属性？

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

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

....

- sulaiman sudirman

---

这个帮了我不少。因为 dayRender 方法在使用 dayThreeView 时不能正常工作。 - Oleg Abrazhaev

Answer 6

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

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

- http203

Answer 7

当使用外部库时，应尽量避免利用库生成的任何内容。因为在下一个版本中，如果他们改变了库内部的工作方式，库仍将向后兼容，但您的代码将停止工作。因此，请尽可能使用库API而不是进行黑客攻击。

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

编辑： Regin Larsen的答案似乎更好。我没有注意到文档中有这个。

- TK Omble

Answer 8

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

- Reemi