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/