Fullcalendar 2: Change background of specific event

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
  <div id="calendar"></div>

JavaScript

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
             selectable: true,
                  selectAllow: function(selectInfo) {
                      console.log(selectInfo);
                    return moment().diff(selectInfo.start) <= 0
                  },  
    // set source and define start and end params
    events: [
        {
            id: "1",
            title: "First event",
            start: "2014-09-26 13:00:00",
            end: "2014-09-26 15:00:00",
            className: 'available'
        },
        {
            id: "2",
            title: "Second event",
            start: "2014-09-26 18:00:00",
            end: "2014-09-26 20:00:00",
            className: 'booked'
        }
    ],
    eventRender: function(event, element) {
        if (event.className == 'booked') {
            element.css({
                'background-color': '#333333',
                'border-color': '#333333'
            });
        }
    }
});