fullcalendar show event based on checkbox value

I am having trouble showing/hiding a set of events based on a checkbox checked or not. I don't understand how to use the eventRender attribute of jquery plugin FullCalendar. I get data from the database and it displays on the calendar fine. All checkboxes are checked. If the user unchecks the checkbox, I want that set of events to be hidden. If checked, show. This is my markup:

<div id="groups" style="float:left; width: 200px; height: 100px">
    <div style="border: 2px solid black; background-color: lightblue">
        <label><input type="checkbox" checked="checked" name="e1" id="e1" value="1" />Warehouse Group</label>     
    </div>
    <div style ="border: 2px solid black; background-color: red">
        <label><input type="checkbox" checked="checked" name="e2" id="e2" value="2" />Interface Group</label>     
    </div>
</div>

This is my document ready function:

$(document).ready(function () {

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

$('#calendar').fullCalendar({

    header:
    {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    titleFormat: {month: 'MMMM'},              
    defaultView: 'month',                 
    editable: false,
    events: function (start, end, timezone, callback) {
        $.ajax({
            type: "POST",
            url: '@Url.Action("GetAllEvents", "Home")',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (doc) {
                var events = [];                     
                $(doc).each(function () { 
                    events.push({
                        title: $(this).attr('title'),  
                        start: $(this).attr('start'), 
                        end: $(this).attr('end'),
                        id: $(this).attr('id'),
                        description: $(this).attr('description'),
                        color: $(this).attr('color'), 
                        textColor: 'black'
                    });

                });
                callback(events);
                } ,                                                                   
            error: function () {
                alert("There was an error fetching events!")
            }
        });
    },
    eventRender: function(event, element) {
        //THIS IS WHERE I AM CONFUSED...
        //Render the event if the 'value' attribute of a checked checkbox
        //equals the description value of the event, show the event.
        $('input[type="checkbox"]').each(function () {
            if ($(this).checked) {
                if ($(this).val() == event.description)
                {
                    show event
                }
            }          
        });         
    }
     });

$('input[type="checkbox"]').on('change', function () {
    $('#calendar').fullCalendar('rerenderEvents');
});