CODEWITHSUNDEEP
jqueryfullcalendar
Takwa Chammam
Takwa Chammam

Reputation: 169

Full calendar: change background of weekends

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

Upvotes: 6

Views: 14428

Answers (4)

sergiol
sergiol

Reputation: 4335

Following the answer from @Irvin Dominin , I post mine based on it, because seems to be out-of-date on the names of the classes. And in my case, I also do not want the headers to be colored the same way:

Month view:
.fc-day-sun .fc-daygrid-day-frame, .fc-day-sat .fc-daygrid-day-frame {
    background-color: #EFF1F5; /* choose whatever color you like */
}
Week and day views:
.fc-day-sun .fc-timegrid-col-frame, .fc-day-sat .fc-timegrid-col-frame {
    background-color: #EFF1F5; /* choose whatever color you like */
}

Different approach

I did not found a class on the day element itself which is not used also in the header, but I found one .fc-col-header-cell which is used on the header, but not on the day instances. And this way, we can do the styling in only one go:

.fc-day-sun:not(.fc-col-header-cell), .fc-day-sat:not(.fc-col-header-cell) {
    background-color: #EFF1F5;    /* choose whatever color you like */
}

I have a bit of a dislike of using the :not(...) declarations on CSS, but I didn't find a better approach yet for my purpose.

Upvotes: 0

sequielo
sequielo

Reputation: 1631

If you need to change the color of both weekend days, I suggest:

.fc-nonbusiness {
  background-color: yellow;
}

Upvotes: 0

Willem Hgv
Willem Hgv

Reputation: 45

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

Upvotes: 3

Irvin Dominin
Irvin Dominin

Reputation: 30993

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/

Upvotes: 16

Related Questions