Using Full Calendar js To apply custom Filters, color coding, Responsive and attaching calendar event to the Mail box

$(document).ready(function () {
    bindRecursiveEvents();
});
function bindRecursiveEvents() {
    var todayDate = new Date();
    var isoDate = todayDate.toISOString();
    var viewfiled = "<ViewFields>" +
                    "<FieldRef Name='Title' />" +
                    "<FieldRef Name='EventDate' />" +
                    "<FieldRef Name='EndDate' />" +
                    "<FieldRef Name='Location' />" +
                    "<FieldRef Name='Description' />" +
                    "<FieldRef Name='PublishingPageContent' />" +
                    "<FieldRef Name='Category' />" +
                    "<FieldRef Name='fRecurrence' />" +
                    "<FieldRef Name='RecurrenceData' />" +
                    "<FieldRef Name='fAllDayEvent' />" +
                "</ViewFields>";
    var CAMLQuery = '<Query><Where>' +
                      '<Or>' +
                          '<DateRangesOverlap>' +
                              '<FieldRef Name="EventDate" />' +
                              '<FieldRef Name="EndDate" />' +
                              '<FieldRef Name="RecurrenceID" />' +
                              '<Value IncludeTimeValue="TRUE" Type="DateTime">' +
                                  '<Week/>' +
                              '</Value>' +
                          '</DateRangesOverlap>' +
                          '<Gt>' +
                              '<FieldRef Name="EventDate" />' +
                              '<Value IncludeTimeValue="TRUE" Type="DateTime">' +
                                      '<Today/>' +
                              '</Value>' +
                          '</Gt>' +
                      '</Or>' +
                      '</Where>' +
                      '<OrderBy>' +
                          '<FieldRef Name="EventDate" />' +
                      '</OrderBy></Query>';

    var CAMLQueryOptions = '<QueryOptions>' +
               '<CalendarDate><Today/></CalendarDate>' +
               '<RecurrencePatternXMLVersion>v3</RecurrencePatternXMLVersion>' +
               '<ExpandRecurrence>TRUE</ExpandRecurrence>' +
           '</QueryOptions>';

    //*** getting count of Events from Configuration List **/
    try {
        var itemcount;
        var url = "/_api/web/lists/GetByTitle('Configuration List')/items?$select=Title,ItemsCount &$filter=Title eq 'Events' ";
        getItems(url, function (data) {
            var listData = data.d.results;
            var itemcount;
            if (listData.length > 0) {
                itemcount = listData[0].ItemsCount;
            }
            else {
                itemcount = 3;
            }
            itemcount = 20;
            var RowLimit = '<RowLimit>' + itemcount + '</RowLimit>'
            var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
            var url = "/_api/web/lists/GetByTitle('Events')/getItems";
            var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
            $.ajax({
                url: siteUrl + url,
                type: "POST",
                headers: {
                    "Accept": "application/json;odata=verbose",
                    "Content-Type": "application/json;odata=verbose",
                    "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                },
                data: JSON.stringify({
                    'query': {
                        '__metadata': {
                            'type': 'SP.CamlQuery'
                        },
                        'ViewXml': '<View>' + RowLimit + viewfiled + CAMLQuery + CAMLQueryOptions + '</View>'
                    }
                }),
                success: function (data) {
                    var dataObj = data.d.results;
                    var eventData = []
                    $.each(dataObj, function (index, item) {
                        eventData.push({
                            title: item.Title,
                            start: item.EventDate.split('T')[0],
                            end: item.EndDate.split('T')[0],
                            url: "/sites/test/Lists/Events/DispForm.aspx?ID=" + item.Id,
                            color: "#257e4a"
                        });
                    });
                    bindEventJson(eventData)
                },
                error: function (data) {
                    alert(data)
                }
            });

        });

    }
    catch (e) {
        console.log(e.message);
        alert('Unable to generate content in this page, please try again!');
    }
}

function bindEventJson(eventsJson) {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'year,month,agendaWeek,agendaDay,listWeek,listYear'
        },
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: eventsJson
    });
}

HTML:
<div id="calendar"></div>

Below are the Necessary Plugins
Basic J-query plugin which you have already if not download from Google.
Full Calendar Plugin
Full Calendar CSS

Below is the Preview