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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></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>');   
      $(this).html(bHtml);
      $(this).find('span').each(function(){
         var tdstyle = $(this).attr('style');
         $(this).removeAttr('style');
         $(this).closest('a').attr('style','color:black').removeAttr('class');
 $(this).closest('td').attr('style',tdstyle).removeAttr('class').removeAttr("onmouseover").removeAttr("onmouseout");
      });
   });

});
</script>

Finally - Add the Calendar View