Highlight weekends in list view

Filed Under (SharePoint, SharePoint branding, jquery) by Boris Gomiunik on 29-08-2009

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)

<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:

image

And the result is:

image

Post a comment

ads
ads
ads