CODEWITHSUNDEEP
jqueryfullcalendar
Andre
Andre

Reputation: 613

Can I set a different color for the weekend on monthly fullCalendar display

How does one go about setting the weekend to a different color when viewing the monthly or weekly view.

Upvotes: 2

Views: 8247

Answers (5)

Avishka Senanayake
Avishka Senanayake

Reputation: 187

If anyone comes across this, the latest versions of FullCalendar have the following stylings:

/* Highlight the weekends */
.fc-day-sat, .fc-day-sun {
    background-color: #e4ece4;
}

It goes by "fc-day" now, with the day in front of it.

Upvotes: 1

Naveen Kumar
Naveen Kumar

Reputation: 1

if we want to color only weekends not friday i tried this .fc-nonbusiness { background-color:white;}

.fc-sat {
    background-color: #e4e4e4;
    color:
}

.fc-sun {
    background-color: #e4e4e4;
}

for full-calendar

Upvotes: 0

Pravin
Pravin

Reputation: 106

I used this to gray-out weekends.

.fc td.fc-sun, .fc td.fc-sat { background-color:#dddddd; }

Upvotes: 0

Ryley
Ryley

Reputation: 21226

I think that for the case of FullCalendar, you just need to specify some CSS for the existing CSS classes:

.fc-sat { color:blue; }
.fc-sun { color:red;  }

Upvotes: 23

DisgruntledGoat
DisgruntledGoat

Reputation: 72530

Obviously this will depend entirely on your HTML, but assuming you are using a table with class calendar, with the weekends at the right:

$('table.calendar > tbody > tr > td:nth-child(-n+2)').addClass('weekend');

-n+2 selects the last 2 table cells in each row. weekend is a class, so in your CSS you'd have something like:

.weekend { color: #00f; }

(If your HTML is different, then update your question with a better description and the code.)

Upvotes: -1

Related Questions