Highlight weekends in list view

August 29th, 2009 | Categories: jquery, SharePoint, SharePoint branding

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.

image  image

When the .js file is uploaded copy its location. Easiest is by right-clicking the document link and selecting “Copy Shortcut”.

image

Now let’s open the list view of the calendar.

image

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.

image

Now using the method from this post drag the Content editor webpart to after the list view

 image

Open the webpart’s ToolPane and edit the source code.

image

First insert the uploaded jquery script (which’s shortcut you’ve coppied to Clipboard)

in the code above replace the src parameter with the url of the uploaded jquery.

Next add the following code:

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:

image

And the result is:

image