SharePoint 2010 / 2013: Colorizing the event in the SharePoint Calender

Here in the following you can see the SharePoint 2013 calender in a week view.
Now this raises many question such as how mulple users are persistantly attached to the calender and how the events are being colorized.

Here my objective is to describe how the event are being colorized. If you have googled enough then you must have come across what Mike Smith has to say on this issue. The "populateCalendarEventLinkIntercept" technique came from Mike Smith this technique handled all calendar view changes including day-week-month; previous/next. How he achieves this is by hooking his method into the existing SharePoint calendar load function.

But this solution wont work in SharePoint 2013 since Mike calls the calender object using SP.UI.ApplicationPages.CalendarNotify.$4a which does not exist in SharePoint 2013.

During Migration, overall I had a lot of troubles fixing this very solution since it was full of client side scripting specially JSOM but finally I did something myself ;). Here is the Javascript code that one small part of that entire solution.

Solution:

It is simple but sort of very customized solution that fit my situation and may fit your needs as well.
Behind this calender (list) there is an event receiver. With this event reciever I add a special character to the title of list items to differenciate between calendar events. See the variables smaller, Empty, Larger and smaller.
I search these sysmbols/indicators/variable  (or whatever you call it) and then colorized and format the events using Javascript according to the requirements.

_spBodyOnLoadFunctionNames.push("ColorizeActivGeplant");

function ColorizeActivGeplant() {

//You can leave this part: Starts
    var Nodeslist = document.querySelectorAll(".ms-acal-item"); 
    $('.ms-acal-entity-input').closest('tr').hide(); //This hides the people picker field 
    $('#zz32_ListSettingsMenu').closest('td').hide(); //removing list setting
    $('#zz27_ListActionsMenu').closest('td').hide(); //removing List action 
    $('#zz19_NewMenu_ti').closest('td').hide(); //removing new menu
    $('.ms-acal-remove').hide(); // This hide the X from the user that are used to remove the user from the calender
    $('.ms-acal-time').hide(); //This hides the time part from the event 12:00
 
//You can leave this part: Ends    
    
    if(document.querySelectorAll(".ms-acal-item") == null || Nodeslist.length == 0 )
    {
        setTimeout(ColorizeActivGeplant, 10);
       
    }
    else {
        for (var i = 0; i < Nodeslist.length; i++) {

   var larger = '(greathan100%)';
            var smaller = '(lessthan100%)';
            var holiday = 'Holiday';
            var Empty = '--Empty--';
            var v = Nodeslist[i].innerHTML;
             
            if (Nodeslist[i].innerText.indexOf(Empty) !== -1) {
                
                Nodeslist[i].parentNode.removeChild(Nodeslist[i]);
            }

            else if (Nodeslist[i].innerText.indexOf(holiday) !== -1) {
                v = v.replace("(lessthan100%)", "

(lessthan100%)
")
                Nodeslist[i].style.backgroundColor = '#A4A4A4';
                Nodeslist[i].innerHTML = v;
            }

            else if (Nodeslist[i].innerText.indexOf(larger) !== -1) {
                v = v.replace("(greathan100%)", "

(greaterthan100%)
")
                Nodeslist[i].style.backgroundColor = '#FA5858';
                Nodeslist[i].innerHTML = v;
            }

            else if (Nodeslist[i].innerText.indexOf(smaller) !== -1) {
                v = v.replace("(lessthan100%)", "

(lessthan100%)
")
                Nodeslist[i].style.backgroundColor = '#FAAC58';
                Nodeslist[i].innerHTML = v;
            }

            else {
                Nodeslist[i].style.backgroundColor = '#81F781';
            }

        }
        setTimeout(ColorizeActivGeplant, 10);   
    }
}

Hope this would be helpful. Cheers.