JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://andrewawhitaker.com/jquery-plugins/fullcalendar.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://andrewawhitaker.com/jquery-plugins/fullcalendar.css">
<div id="calendar"></div>

<span>Single Event Filter:</span>
<select id="filter">
    <option id="1">Christmas Eve</option>
    <option id="2">Christmas Day</option>        
    <option id="3">Boxing Day</option>        
</select>

<span>Multi-event filter:</span>
<select id="filter2">
    <option>Christmas</option>
    <option>Boxing</option>
</select>

JavaScript

// Initialize calendar
$('#calendar').fullCalendar({   
    header: {
        left: 'prev',
        center: 'title',
        right: 'next'
    },
    buttonText: {
        prev: 'Previous month',
        next: 'Next month'
    },
    columnFormat: {
        month: 'dddd'
    },
    editable: false,
    events: "events.json",
    disableDragging: true,      
    events: [
        {
            id: 'event-1',
            title: 'Christmas Eve',
            start: '2013-12-24',
            allDay: true
            category: '1'
        },
        {
            id: 'event-2',
            title: 'Christmas Day',
            start: '2013-12-25',
            allDay: true
            category: '2'
        },
        {
            id: 'event-3',
            title: 'Boxing Day',
            start: '2013-12-26',
            allDay: true
            category: '3'
        }
    ]    
});

$("#filter").change(function () {
    $("#calendar").fullCalendar("removeEvents", filter);
});

$("#filter2").change(function () {
    $("#calendar").fullCalendar("removeEvents", filter2);
});

function filter(event) {
    return $("#filter > option:selected").attr("id") === event.category
}

function filter2(event) {
    var optionText = $("#filter2 > option:selected").text();
    return event.title.indexOf(optionText) >= 0;
}