Color coding in SharePoint calendar

Add the below script in a notepad and save it as .txt.Reference the .txt file to a content editor webpart which will be added to the calendar.aspx page of calendar.



<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js"></script>
<script type="text/javascript">  
_spBodyOnLoadFunctionNames.push('WaitForCalendarToLoad');
var SEPARATOR = "|||";
function WaitForCalendarToLoad() {      
if(typeof SP.UI.ApplicationPages.CalendarNotify.$4a == 'undefined') {
// post SP1
var pwold$4b = SP.UI.ApplicationPages.CalendarNotify.$4b;
SP.UI.ApplicationPages.CalendarNotify.$4b = function () {
pwold$4b();
ColourCalendar();
}          
SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids = function($p0) {
var $v_0 = new Sys.StringBuilder();
var $v_1 = $p0.length;
for (var $v_2 = 0; $v_2 < $v_1; $v_2++) {
this.$7t_2($v_2, $p0[$v_2]);                
}                
for (var $v_3 = 0; $v_3 < $v_1; $v_3++) {
$v_0.append('<div>');
this.$I_2.$7o($v_0, $p0[$v_3], $v_3);
$v_0.append(this.emptY_DIV);
$v_0.append('</div>');
}
this.setInnerHtml($v_0.toString());
ColourCalendar();
}      
}      
else
{
// pre SP1
var pwold$4a = SP.UI.ApplicationPages.CalendarNotify.$4a;
SP.UI.ApplicationPages.CalendarNotify.$4a = function () {
pwold$4a();
ColourCalendar();
}            
SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids = function($p0) {
var $v_0 = new Sys.StringBuilder();
var $v_1 = $p0.length;
for (var $v_2 = 0; $v_2 < $v_1; $v_2++) {
this.$7r_2($v_2, $p0[$v_2]);                
}                
for (var $v_3 = 0; $v_3 < $v_1; $v_3++) {
$v_0.append('<div>');                      
this.$I_2.$7m($v_0, $p0[$v_3], $v_3);
$v_0.append(this.emptY_DIV);
$v_0.append('</div>');
}
this.setInnerHtml($v_0.toString());
ColourCalendar();
}
}
}

function ColourCalendar() {
        if(jQuery('a:contains(' + SEPARATOR + ')') != null)
        {            
jQuery('a:contains(' + SEPARATOR + ')').each(function (i) {
$box = jQuery(this).parents('div[title]');
var colour ;
var NoshowText=GetNoShowText(this.innerHTML);
if(NoshowText.trim().toLowerCase()=="true")
{
colour  = GetColourCodeFromCategory(GetNoShowText(this.innerHTML));
}
else
{
colour  = GetColourCodeFromCategory(GetCategory(this.innerHTML));
}


this.innerHTML = GetActualText(this.innerHTML);
jQuery($box).attr("title", GetActualText(jQuery($box).attr("title")));
$box.css('background-color', colour);
});      
}  
}  

function GetActualText(originalText) {    
var parts = originalText.split(SEPARATOR);

return parts[0] + parts[4];  
}

function GetCategory(originalText) {
var parts = originalText.split(SEPARATOR);
return parts[1];  
}

function GetNoShowText(originalText) {
var parts = originalText.split(SEPARATOR);
return parts[3];  
}


function GetColourCodeFromCategory(category) {

var colour = null;    
switch (category.trim().toLowerCase()) {
case 'n/a':        
colour = '#4FDB51';
break;
case 'true':        
colour = '#4FB8DB';
break;
case 'false':        
colour = '#F08616';
break;
 
}    
return colour;  
}
</script>



In my case  i have added 4 fields with ||| separator ,based on a field the color will be visible.
the GetNoShowText() having the separator value true or false ,you can have your own.

Add the below html to the calendar.aspx page after the placeholdermain to show that, which colour used for
which purposed.



<table style="text-align:left;padding-left:5px;padding-top:10px;">
        <tr>
            <td style="background-color:#D4EEFF;width:12px;height:5px;">
            </td>
            <td class="ms-formlabel"><h3 class="ms-standardheader">Appointment Booked</h3>
            </td>
        </tr>
        <tr>
            <td style="background-color:#dcfacf">
            </td>
           <td class="ms-formlabel"><h3 class="ms-standardheader">Appointment Not Booked</h3>
            </td>
        </tr>
       
    </table>