Thursday, January 30, 2014

How to color code SharePoint 2010 calendar with Jquery

It is very easy to achieve this with Jquery, a little tricky, as the calendar items loads after the page is ready, hence jquery document.ready() function will still not have all of the html.
<script type="text/javascript">
if (typeof jQuery == "undefined") {
    var jQPath = "_layouts/MFS/";
    document.write("<script src='", jQPath, "jquery-1.8.3.min.js' type='text/javascript'><\/script>");
}
_spBodyOnLoadFunctionNames.push('colorCalendarEventLinkIntercept')
function colorCalendarEventLinkIntercept()
{
  if (SP.UI.ApplicationPages.CalendarNotify.$4a)
  {
    var OldCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4a;
    alert(OldCalendarNotify);
    SP.UI.ApplicationPages.CalendarNotify.$4a = function ()
    {
        OldCalendarNotify();
        colorCalendarEventLinks();
    }
  }
  if (SP.UI.ApplicationPages.CalendarNotify.$4b)
  {
    var OldCalendarNotify =SP.UI.ApplicationPages.CalendarNotify.$4b;
     alert(OldCalendarNotify);
    SP.UI.ApplicationPages.CalendarNotify.$4b = function ()
    {
        OldCalendarNotify();
        colorCalendarEventLinks();
    }
  }
}
function colorCalendarEventLinks() {
 $('div.ms-acal-item[title*="usa"]').css('background-color', '#FF0000');
 $('div.ms-acal-item[title*="china"]').css('background-color', '#F00987');
 $('div.ms-acal-item[title*="india"]').css('background-color', '#F00987');
}
</script>

No comments:

Post a Comment