Fullcalendar: Change the color for specific days

问题

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.

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.

回答1:

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

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

And here's a working example on 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.,:

.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.

    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.

回答5:

Why not using the "data-date" attribute?

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

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.

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

回答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/

回答8:

getDate does not work I guess, use moment instead.

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

来源：https://stackoverflow.com/questions/17613582/fullcalendar-change-the-color-for-specific-days

标签

jquery

fullcalendar

cell

background-color