Fullcalendar：更改特定日期的颜色

I'm stuck with a project I get at work. I need to change the background color of some days. It's a calendar where the user should see, which days are available and which not. I found out that there is an attribute called "data-date", but I didn't found a possibility to use it.

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

Is there any way to manipulate the background of specific days?

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

I think there must be a way, cause the cell which shows the current date has another color too.

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

8 个解决方案

#1

For the views month, basicWeek and basicDay you can change the rendering of the days by providing a dayRender function. E.g.:

对于views month,basicWeek和basicDay,您可以通过提供dayRender函数来更改日期的呈现。例如。:

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

The documentation for dayRender is available here: http://arshaw.com/fullcalendar/docs/display/dayRender/

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

And here's a working example on jsfiddle: http://jsfiddle.net/kvakulo/CYnJY/4/

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

#2

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

#3

For those looking to simply change the color of past dates, target .fc-past in your css and add a background-color property. E.g.,:

对于那些只想改变过去日期颜色的人,请在你的css中定位.fc-past并添加背景颜色属性。例如。,:

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

#4

If any one want to jquery fullcalendar previous all day red(or any other) colored then this is the code.

如果任何人想要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 code help me achive this. Thanks Regin Larsen.

Regin Larsen代码帮助我实现了这个目标。感谢Regin Larsen。

#5

Why not using the "data-date" attribute?

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

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

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

....

#6

When working with external libraries, you should try not to take advantage of anything that was generated by the library. Since in the next version, if they change the way the library works internally, the library will still be backward compatible but your code will stop working. So try to use the library API as much as possible instead of doing hacks.

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

Answering your question, one way to do it will be, add a new event to all the days that are not available. This can be done by creating event object and doing a renderEvent(.fullCalendar( 'renderEvent', event [, stick ] )). While creating an event object assign the background color as the color you want and set the color, text color, border color to the same as background if you dont want it to be visible.

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

Edit: Regin Larsen's answer seems better. I didn't notice that in the documentation.

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

#7

To compare using the date parameter for a specific day:

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

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

isSame comes from moment.js, which is used by fullcalendar: http://momentjs.com/docs/#/query/is-same/

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

#8

getDate does not work I guess, use moment instead.

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

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

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

#1