<script>
    var calendarObjects = [
        {name:"Event Type 1", colour:"#735f9e"},
        {name:"Event Type 2", colour:"#bf00fe"},
        {name:"Event Type 3", colour:"#0000ff"},
        {name:"Event Type 4", colour:"#83b53f"},
        {name:"Event Type 5", colour:"#ff99cc"} ,   
    ]
</script>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script type="text/javascript">

    LoadSodByKey("SP.UI.ApplicationPages.Calendar.js", function () {
        WaitForCalendarToLoad();
    });

    var SEPARATOR = "|||";

    function WaitForCalendarToLoad() {
     
        var _renderGrids = SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids; 
        SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids = function($p0) {  

             _renderGrids.call(this, $p0); 

             ColourCalendar();
        }

        var _onItemsSucceed = SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed; 
        SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed = function($p0, $p1) {  

             _onItemsSucceed.call(this, $p0, $p1); 

             ColourCalendar();
        }
    }

    function ColourCalendar() {

        // Find calendar links (i.e. links that contain the separator |||)
        if ($('a:contains(' + SEPARATOR + ')') != null) {

            // Loop through calendar links
            $('a:contains(' + SEPARATOR + ')').each(function (i) {

                // Get the div of the calendar entry
                $box = $(this).parents('div[title]');

                // Get the category, colour and actual text
                var category = GetCategory(this.innerHTML);

                if (category != "")
                {                  
                    var colour = GetColourCodeFromName(category);
                    var actualText = GetActualText(this.innerHTML);

                    // Set html of calendar entry
                    this.innerHTML = actualText;

                    // Set the title of the div
                    $($box).attr("title", GetActualText($($box).attr("title")));

                    // Set class of div to category without spaces
                    $($box).attr("class", "calendarEvent " + category.replace(/ /g, ""));

                    // Set the background colour
                    $box.css('background-color', colour);

                }
                else
                {
                    // Set html of calendar entry
                    this.innerHTML = GetActualText(this.innerHTML);

                    // Set class of div to category without spaces
                    $($box).attr("class", "calendarEvent");

                    // Set the background colour
                    $box.css('background-color', '#da7b2f');
                }

            });
        }

        // Setup filter links
        SetupFilterLinks();

        // If filter already selected
        var selectedFilter = document.getElementById('hfdSelectedFilter').value;
        if (selectedFilter != "") {
            FilterCategory(document.getElementById('hfdSelectedFilter').value);
        }
    }

    function GetActualText(originalText) {
        var parts = originalText.split(SEPARATOR);
        return parts[0] + parts[2];
    }

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

    function GetColourCodeFromName(name) {

        // Iterate calendar objects
        for (var i = 0, len = calendarObjects.length; i < len; i++) {
            if (calendarObjects[i].name === name)
                return calendarObjects[i].colour; // Return as soon as the object is found
        }
        return "#999999"; // Default to dark grey      
    }

    function FilterCategory(category) {

        // Get category with no spaces
        var categoryNoSpaces = category.replace(/ /g, "");

        // If divs with class "calendarEvent" exist
        if ($('div.calendarEvent') != null) {

            // Loop through divs
            $('div.calendarEvent').each(function (i) {

                // Hide divs
                this.style.display = "none";
            });
        }
        

        // If div(s) with category class exist
        if ($('div.' + categoryNoSpaces) != null) {
            
            // Loop through divs
            $('div.' + categoryNoSpaces).each(function (i) {

                // Set display to block
                this.style.display = "block";
            });
        }

        // Set hidden field value
        document.getElementById('hfdSelectedFilter').value = categoryNoSpaces;

        // Expand all days
        expandCalCheck();

        // Hide collapse links
        hideCollapseLinks();

    }

    function expandCalCheck() {
        var a = $("a.ms-cal-nav", $("div.ms-acal-rootdiv:last>div")).get(0);
        if (a) {
            for (var r = 0; r < 6; r++) {
                var a = $("a.ms-cal-nav", $("div.ms-acal-rootdiv:last>div").get(r)).get(0);
                if (a)
                    if (a.innerText.indexOf("more") >= 0) {
                        a.click();
                    }

            }
        }
    }

    function hideCollapseLinks() {
        if ($('a:contains(collapse)') != null) {

            // Loop through collapse links
            $('a:contains(collapse)').each(function (i) {
                this.style.display = "none";
            });
        }
    }

    function ShowAllEvents() {

        // If divs with class "calendarEvent" exist
        if ($('div.calendarEvent') != null) {

            // Loop through divs
            $('div.calendarEvent').each(function (i) {

                // Hide divs
                this.style.display = "block";
            });

            // Set hidden field value
            document.getElementById('hfdSelectedFilter').value = "";
        }
    }

    function SetupFilterLinks()
    {
        // Variables
        var filters = [];

        // Loop through calendar objects
        $(calendarObjects).each(function (i) {

            var name = this.name;
            var colour = GetColourCodeFromName(name);

            // Add filters variable
            filters.push("<a href='javascript:void(0)' id='" + name.replace(/ /g, "") + "' class='filterLink' style='background-color:" + colour + "' onclick='FilterCategory(\"" + name + "\")'>" + name + "</a> ");

        });

        // Add filters to page
        $('.calendarFilters').replaceWith(filters.join(''));

        $('.filters a').click(function () {
            $(this).addClass('selected');
            $(this).siblings().removeClass('selected');
        });
    }



</script>

<style>
    .filters
    {
        margin:10px 0 0 0;
    }

    .filters .title
    {
        font-size:15px;
        margin:0 5px 0 0;
    }

    .filters .filterLink
    {
        color:#ffffff !important;
        padding:3px 6px 4px 6px;
        display: inline-block;
        margin-bottom: 5px;
    }

    .filters .filterLinkShowAll
    {
        color:#ffffff !important;
        background:#666666;
    }

    .filters .selected
    {
        border:2px solid #000000 !important;
        padding:1px 4px 2px 4px;
    }

</style>

<input type="hidden" id="hfdSelectedFilter" name="hfdSelectedFilter">

<div class="filters">
    <span class="title">Filters:</span>
    <a href="javascript:void(0)" class="filterLink filterLinkShowAll selected" onclick="ShowAllEvents()">Show all</a>
    <div class="calendarFilters">
        <!-- -->
    </div>
</div>