Gray out weekends in SharePoint calendars month scope

September 7th, 2016 | Posted by Marijn in Uncategorized

Calendars in SharePoint look nice, but bland. You can change that by adding color overlays for example. But one of the things that I personally miss is the functionality to visibly separate the weekdays from weekends when you look at the month view. In the week view, the business hours that you set up are shown in a nice, gray way. On the month view however, no such visualisation is present. All days just have the same color, giving them the same importance. Even in a month view, I think that marking the weekend days in gray would make the calendar look much nicer.

So when a client asked me to mark the weekends in gray, I was happy to comply. They wanted a way to show the days that they were available in a nicer color, with some overlays and gray weekends.

This code works for SharePoint 2013, SharePoint 2016 and Office 365 (up to september 2016). It will mark Saturday and Sunday in a gray background color, but you can easily change the color if you want to.

How does it look like? (well, gray obviously)

gray weekend

 

The code

The code itself is just a short piece of CSS markup language.
How it works is that it looks up the columns for day 6 (Saturday) and day 0 (Sunday) and gives them a background color.

<style type="text/css">
.ms-acal-day6{
background-color:#CCCCCC;
}

.ms-acal-day0{
background-color:#CCCCCC;
}

<style>

 

How to implement it?

There are different ways of implementing it. The easiest is to add a script editor on the page where you are showing the calendar and pasting the code above in the editor.

You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.

Leave a Reply

%d bloggers like this: