Thursday, November 5, 2009

A Colorful SharePoint Calendar

A calendar that has events with color coded is easier to read and more attractive. This calendar is made possible with a jQuery, a calculated column, and a customized view. First, lets look at the results. The month, week and day views are all modified and available for use.

Step 1 - Create A Color Column
Create a new column called color, make it a choice field and add a number of colors for your users to select.

Step 2 - Create A Calculated Column
Enter the following in the formula field

="<span style='background-color:"&color&";padding:4px;text-align:center;width:100%;'>"&Title&"</span>"

Step 3 - Create View that displays the calculated field

Step 4 - Reference the jQuery Library 
Add a CEWP to the page and add the following line
<script type="text/javascript" src=""></script>

Step 5 - Add the script
Add a new CEWP to the page and add the following script
<script type="text/javascript">
// Make sure the page has been loaded
$(document).ready(function() {

  $(".ms-cal-dayitem, .ms-cal-dayMultiDay, .ms-cal-monthitem, .ms-cal-defaultbgcolor").each(function(){
      var bHtml = $(this).html();
      bHtml = bHtml.replace(/&lt;(.+?)&gt;/g,'<$1>');   
         var tdstyle = $(this).attr('style');


Finally - Add the Calendar View

No comments:

Post a Comment