JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/gcal.js"></script>
<button id='highlight'> Highlight </button>
<button id='unhighlight'> unHighlight </button>
<div id='loading' style='display:none'>loading...</div> 
<div id='calendar'></div>

CSS

.highlight {
    background: red;
}

JavaScript

var highlight_these_events = [];

function highlightSelectedEvents() {

    for (var index = 0; index < highlight_these_events.length; index++) {
        $(highlight_these_events[index]).addClass('highlight');
    } 
    
}

$(document).ready(function() {

    $('#calendar').fullCalendar({

        // Multiple Sources
        eventSources: [
        'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
        'http://www.google.com/calendar/feeds/en.german%23holiday%40group.v.calendar.google.com/public/basic'
        ],
        loading: function(bool) {
            if (bool) {
                $('#loading').show();
            } else {
                $('#loading').hide();
                highlightSelectedEvents();
            }
        }
    });
    
    $( "#highlight" ).on( "click", function() {
        $('#calendar').fullCalendar('gotoDate', 2018, 10);        
        highlight_these_events.push('.fc-event:nth-child(4)');
        highlightSelectedEvents();
    });
    
    $( "#unhighlight" ).on( "click", function() {
        $('.fc-event').removeClass('highlight');
    });
    
    

});