Websch01ar's Blog

As part of the ever-evolving requirement to learn as much about SharePoint implementation and development while I wait for official sanction from the business owners, I found Josh McCarty’s blog post on Display Events from a SharePoint Calendar Using jQuery and FullCalendar fascinating.  I was able to quickly follow his steps to get close to implementing FullCalendar (minor tweaking to the javascript was needed).  What I found most troubling was the difficulty in getting the span tags to work.  So I looked at the OOTB SharePoint calendar and wondered…..could I at least color code and drag events around.  I tried to drag an event and it worked, so thus began my journey into getting events color coded based upon a flags column.

Preparation

1. The first step in any SharePoint development is to always use custom views.  Since I needed to play around with a calendar list, I exported my team’s calendar and imported as a new name.
2. I created a new view “Custom Calendar” and set it as the default.  This way I can always fall back and punt.
3. Create a calculated field that will derive its values from a choice column.  In my instance, flags is the choice column and FlagsColor is the calculated field.  Here is my formula

   =IF(Flags="Sick","$!$SICK$!$"&Title,IF(Flags="PTO","$!$PTO$!$"&Title,IF(Flags="Training","$!$TRN$!$"&Title,IF(Flags="Other Out of Office","$!$OUTOFOFFICE$!$"&Title,Title))))

   The $!$*$!$ format is an internal format for replaceable parameters that I like to use.  As you can tell, the flag field is used to determine if the event is categorized as a sick day, PTO, Training, or otherwise out of the office.

Modifying the calendar aspx page

1. Alright, so lets open the new calendar view and click code view.  Find this line:

   </ZoneTemplate></WebPartPages:WebPartZone>

2. Load jQuery and some basic css:

   <!-- Custom Calendar Code Here -->
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
   <style type="text/css">
   	.SICK {
   	background-color:black;
   	color:white
   }
   	.OTHER {
   	background-color:yellow;
   	color:black
   }
   	.PTO {
   	background-color:blue;
   	color:white
   }
   	.TRN {
   	background-color:red;
   	color:white
   }
   	.SHAWN {
   	background-color:pink;
   	color:#FF1493
   }
   
   </style>
   

3. Thanks to Josh’s research, the following JavaScript will be needed to wait until the calendar fully loads before writing our custom jquery:

   <script type="text/javascript">
   // Color coded calendars for SharePoint 2010
   // TechTrainingNotes.blogspot.com
   
   // load our function to the delayed load list
   _spBodyOnLoadFunctionNames.push('colorCalendarEventLinkIntercept');
   
   // hook into the existing SharePoint calendar load function
   function colorCalendarEventLinkIntercept()
   {
     var OldCalendarNotify4a = SP.UI.ApplicationPages.CalendarNotify.$4a;
     SP.UI.ApplicationPages.CalendarNotify.$4a = function ()
       {
         OldCalendarNotify4a();
         //I am using Josh's function to keep things simple
         colorCalendarEventLinks();
   
       }
   }
   

4. Make the desired jQuery changes for color coding your events:

   function colorCalendarEventLinks()
   {
   
   $(".ms-acal-item","div").find(":contains($!$SICK$!$)").addClass("SICK")
   	.text(function(lcv, text){ return text.replace(/\$!\$.*\$!\$/, '') })
   	.end()
   	.find(":contains($!$PTO$!$)").addClass("PTO")
   		.text(function(lcv, text){ return text.replace(/\$!\$.*\$!\$/, '') })
   	.end()
   	.find(":contains($!$OUTOFOFFICE$!$)").addClass("OTHER")
   		.text(function(lcv, text){ return text.replace(/\$!\$.*\$!\$/, '') })
   	.end()
   	.find(":contains($!$TRN$!$)").addClass("TRN")
   		.text(function(lcv, text){ return text.replace(/\$!\$.*\$!\$/, '') })
   	.end()
   	.find(":contains(Shawn)").addClass("SHAWN")
   		.text(function(lcv, text){ return text.replace(/\$!\$.*\$!\$/, '') })
   	.end().attr("title", function(lcv, title) {	return $(this).text()	});
   }
   
   </script>
   

If all goes right, there should be no errors prompted by the browser and you will end up with a calendar control that looks like this:

I am just working on getting this blog underway and learning how best to post content that is meaningful for me and for any potential readers.  I welcome your comments and feedback!