This trick works with a list view (not calendar view) of any list that has dates. It doesn’t work in a calendar view of a list. We’ll need jquery for this script to work. So if you don’t have jquery uploaded you can download it from jquery.com. The way I usually add it to the site is by creating a document library for “system” files in this demo I’ll create a llibrary called sys.
When the .js file is uploaded copy its location. Easiest is by right-clicking the document link and selecting “Copy Shortcut”.
Now let’s open the list view of the calendar.
Now we create an additional column for displaying day of the week. The details are described in this post only using the day name. The formula is
=TEXT([DateField],"ddd")
In the example above in locales where you use decimal comma, use the semicolon as parameters separator.
Next add the created column to the view.
Now using the method from this post drag the Content editor webpart to after the list view
Open the webpart’s ToolPane and edit the source code.
First insert the uploaded jquery script (which’s shortcut you’ve coppied to Clipboard)
<script type=”text/javascript” src=”http://[site][/web]/sys/jquery-1.3.2.min.js></script>
in the code above replace the src parameter with the url of the uploaded jquery.
Next add the following code:
<script type=”text/javascript”>
$("table.ms-listviewtable tr:contains(‘Sat’) td, table.ms-listviewtable tr:contains(‘Sun’) td, table.ms-listviewtable tr:contains(‘Sat’) td a, table.ms-listviewtable tr:contains(‘Sun’) td a").attr({ style: "color: red;" });
</script>
The code above will color all the texts and all the llinks in weekends in red. The full code is shown in the screenshot below:
And the result is:
