Fullcalendar: Change the color for specific days

Question

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.

score 39 · Accepted Answer · edited Feb 01 '15 at 14:52

39

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/

edited Feb 01 '15 at 14:52

Bardh Lohaj

1,402
1
9
17

answered Jul 12 '13 at 12:34

Regin Larsen

1,152
8
14

1

See my answer below for a CSS based solution which presumably would be faster: http://stackoverflow.com/a/36927481/270302 – Avindra Goolcharan May 05 '16 at 17:41
I can only pass date here how can I pass it with the month and year like [10-12-2018,24-12-2018] instead of [10,24] – abhi krishnan Oct 15 '18 at 12:06

score 9 · Answer 2 · answered Apr 29 '16 at 00:12

9

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;
}

answered Apr 29 '16 at 00:12

Avindra Goolcharan

4,032
3
41
39

score 8 · Answer 3 · answered Oct 21 '14 at 17:50

8

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

answered Oct 21 '14 at 17:50

radmonius

81
1
1

score 5 · Answer 4 · answered Jan 09 '14 at 12:54

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.

score 4 · Answer 5 · answered Jan 11 '14 at 01:12

4

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

....

answered Jan 11 '14 at 01:12

sulaiman sudirman

1,826
1
24
32

this one helped me. because `dayRender` method doesn't work properly with a dayThreeView – Oleg Abrazhaev Nov 22 '17 at 11:29

score 1 · Answer 6 · answered Jul 12 '13 at 12:39

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.

score 1 · Answer 7 · answered Aug 04 '16 at 14:15

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/

score 0 · Answer 8 · edited Jun 05 '18 at 05:03

0

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

edited Jun 05 '18 at 05:03

an33sh

1,089
16
27

answered Jun 03 '18 at 11:59

Reemi

1
1

Fullcalendar: Change the color for specific days

8 Answers8

Linked