Creating color coded entries within the OTB SharePoint calendar

This post is a much about JQuery as it is the Calendar

The requirements for this are as follows: The calendar should display different color coded entries based on a category selection. The category list is represented as an added field of type "Choice". In this simple example I’ve preloaded Red, Blue, and Green as the category choices

The original inspiration for this came from http://planetwilson.blogspot.com/2007/09/sharepoint-2007-colour-color-calendar.html by Mark Wilson. So thanks to Mark. The original javascript code for this did not work so well but did provide some great motivation. Because I’m taking the time to learn JQuery and also because someone asked if this was possible, I thought it would be a good idea to recast Mark’s initial solution using JQuery. Limitations do exist here but the results are pretty striking.

Also, keep in mind this is sample code and my use of the content editor webpart should not be considered a production solution. In the end, this probably scales better as a webpart project (deployed as a solution). See Mark’s updated webpart http://planetwilson.blogspot.com/2008/02/version-2-of-colour-calendar-released.html

A recent post by Andrew Connell spells out his concerns using CEWP in production sites, particularly within publishing sites. See http://andrewconnell.com/blog/archive/2009/02/01/Blocking-the-use-of-the-Content-Editor-Web-Part-in.aspx

That being said, the following steps should provide a feel for how this all works. JQuery is an open source library now being adopted by Microsoft. As of this post I’m still learning JQuery so the code here could likely be tightened up a bit and made more general, or expanded upon.

Preliminary: create or use an existing SharePoint library to store the JQuery API if its not already copied to the SharePoint server. Be sure its linked properly using the code below. See http://www.jquery.com/

1. Put the calendar page in edit mode.

2. Add a Content Editor Web Part to the page.

3. Open up the CEWP and click "Source Editor"

4. Paste the following JQuery code into the webpart editor (NOTE: I use “made up” categories called “Red, Blue, Green” and pass in the colors I want to associate with them using the function “AddCategoryColor()”. The name of the categories and color choices are independent of course.

<script type="text/javascript" src="{your SP library}/jquery-1.3.js"></script>

<script type="text/javascript">

$(document).ready(function() {

        AddCategoryColor("Red", "#FF0000");
        AddCategoryColor("Green", "#00FF00");
        AddCategoryColor("Blue", "#0000FF");
        FormatDisplay();  

});

function AddCategoryColor(cat, color) {

        var cont = ":contains("+ cat +")";
        $("td.ms-cal-monthitem").filter(cont).find("a").css("color",color);
        $("td.ms-cal-eworkday").filter(cont).find("a").css("color",color);
        $("td.ms-cal-eworkhour").filter(cont).find("a").css("color",color);
        $("td.ms-cal-enoworkday").filter(cont).find("a").css("color",color);

}

function FormatDisplay() {
       $("td.ms-cal-monthitem").find("a").each(function(){
              var me = $(this), txt = me.text();
              me.html(txt.split("|||")[1]);
        });

        $("td.ms-cal-eworkday").find("a").each(function(){
              var me = $(this), txt = me.text();
              me.html(txt.split("|||")[1]);
        });

        $("td.ms-cal-eworkhour").find("a").each(function(){
              var me = $(this), txt = me.text();
              me.html(txt.split("|||")[1]);
        });

        $("td.ms-cal-enoworkday").find("a").each(function(){
              var me = $(this), txt = me.text();
              me.html(txt.split("|||")[1]);
        });

}

</script>

5. Create a new column called category on the calendar list, use type “string”

6. Create a new calculated field called CatTitle set to “=Category&"|||"&Title”

7. Click apply then Ok

8. Exit edit mode

9. Set calendar display views as follows

clip_image001

 

7. Go into the calendar and create a couple of entries

 

clip_image001[6]

 

Very cool. The best thing is the code can be made very clean. JQuery has tremendous potential and well worth developers time to learn.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s