Full calendar: change background of weekends

Question

I'am trying to disable weekends in full calendar but this option weekends:false

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

    header: {

        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
            },

    weekends: false,
    ........});

delete weekends from the calendar or i want to disable only the two days by change the background color and make them unselectable.
what should i do? thanks for any help

Answer 1

If I understand correctly your question you want:

1. show week-ends in a different color
2. know if the day is a week end day

First point, you can use css rules to style the week-end elements:

.fc-sat, .fc-sun {
    background-color: red !important;
}

Second point, you can check if the selected date is a week end, and act as you want. You can use the dayClick (http://arshaw.com/fullcalendar/docs/mouse/dayClick/) event in this way:

dayClick: function (date, allDay, jsEvent) {
    var checkDay = new Date($.fullCalendar.formatDate(date, 'yyyy-MM-dd'));
    if (checkDay.getDay() == 6 || checkDay.getDay() == 0) alert('Weekend!');
}

You can't disable a day because FullCalendar is not a datepicker, so you can't "disable", but you can handle everything you want.

Here is a working fiddle: http://jsfiddle.net/IrvinDominin/qLUFg/1/

Answer 2

Addition to Irvin Dominin's answer:

Sometimes the first part of the answer above can cause the widget-header to become the same color. So, in order to only address the weekend day cells, use the following styling:

.fc-sat,
.fc-sun {
  &.fc-day {
    background-color: red !important;
  }
}