Question

我遇到了一个我上班的项目。我需要改变一些天的背景颜色。这是一个用户应该看到的日历，哪些日期可用，哪些日期不可用。我发现有一个名为“data-date”的属性，但我没有找到使用它的可能性。

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

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

Answer 1

对于观看次数month，basicWeek和basicDay，您可以通过提供dayRender功能来更改日期的呈现。 E.g：

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

Answer 2

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

Answer 3

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

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

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。

Answer 5

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

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

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

....

Answer 6

使用外部库时，您应该尽量不利用库生成的任何内容。因为在下一个版本中，如果它们改变了库内部工作的方式，那么库仍然可以向后兼容，但是代码将停止工作。因此，尽量使用库API，而不是做黑客。

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

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

Answer 7

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

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

Answer 8

getDate无法正常工作我猜，请改用。

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

Fullcalendar：更改特定日期的颜色

8 个答案: