Color weekend at Fullcalendar - fullcalendar

Question

I am using FullCalendar component and I need to color the weekends ,Friday & Saturday.
I have used the following as recommended here:
Can I set a different color for the weekend on monthly fullCalendar display
$('table.calendar > tbody > tr > td:nth-child(-n+2)').addClass('fc-weekend');
I added as well the css class.
Here is me code that doesn't color the weekends ... Any advise!
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$.getJSON('[#spring.url '/loadSomeData'/]', function (data) {
$.getJSON('[#spring.url '/loadOtherData/]', function (info) {
information = returnedPublicVacation;
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select:
function(start, end, allDay) {
vacationStart = start;
showTheCorrectDialog(vacationStart);
},
eventClick: function(calEvent, jsEvent, view) {
showTheCorrectDialog(calEvent.start);
// change the border color just for fun
$(this).css('border-color', 'red');
},
editable: true,
events:data.concat(information)
});
resourceVacation = data;
});
});
$('table.calendar > tbody > tr > td:nth-child(-n+2)').addClass('fc-weekend');
});

Answer 1

Did you add style to the class in your css file?
You might also try this:
.fc-fri { color:blue; }
.fc-sat { color:red; }
(or .fc-sun for Sunday)
You can see the example here: http://jsfiddle.net/rajesh13yadav/nf9whojL/1/

Answer 2

In version 4 you can add an event for all Sundays or another days together using "daysOfWeek".
events: [
{
daysOfWeek: [0,6], //Sundays and saturdays
rendering:"background",
color: "#ff9f89",
overLap: false,
allDay: true
}]
I recommend that you use this method because you can easily change it with server-side scripting languages (like PHP, Node.js, JavaScript, etc.)

Answer 3

This worked for me:
.fc-sun {
color:#337ab7;
border-color: black;
background-color: #ffa58c; }

Answer 4

AJS.$(document).ready(function () {
AJS.$(".fc-weekend-column").each(function(i,el){
AJS.$(this).css("background-color", "#FFF7F7");
});
});

Answer 5

SOLUTION IN FULLCALENDAR VERSION 5:
Apply CSS style to the fc-day-sat and fc-day-sun class:
#calendar .fc-day-sun, #calendar .fc-day-sat {
background-color: #f4f5d7;
}
If you don't want to change the color of calendar header (which display the "Sat" and "Sun"), u can precisely apply the css for the fc-day-sat and fc-day-sun class by adding td tag:
#calendar td.fc-day-sun, #calendar td.fc-day-sat {
background-color: #f4f5d7;
}

Answer 6

In fullcalendar version 5
The css class for days has been changed as given below.
.fc-sun -> .fc-day-sun
.fc-mon -> .fc-day-mon
.fc-tue -> .fc-day-tue
.fc-wed -> .fc-day-wed
.fc-thu -> .fc-day-thu
.fc-fri -> .fc-day-fri
.fc-sat -> .fc-day-sat
So you can use like (For sunday)
.fc-day-sun {
background-color: red;
/*your styles goes here*/
}

Answer 7

Fullcalendar version 5:
.fc-sat and .fc-sun has been converted to .fc-day-sat and .fc-day-sun.
Also applying bgcolor to .fc-day-sat, .fc-day-sat will not work anymore, because they have applied bgcolor to .fc-non-business which is the deepest child class.
.fc .fc-non-business {
background-color: #fff;
}
A common class will do the job now.

Answer 8

If you want to remove the top layer of the weekend, use the following code
.fc-day-sat .fc-daygrid-day-frame .fc-daygrid-day-bg .fc-daygrid-bg-harness{
display: none;
}
.fc-day-other .fc-daygrid-day-frame .fc-daygrid-day-bg .fc-daygrid-bg-harness{
display: block;
}
.fc-day-other .fc-daygrid-day-frame .fc-daygrid-day-bg .fc-daygrid-bg-harness .fc-non-business{
display: none;
}
You can use this code after that:
Use this