Calendar with images for classes

calendar.template.html

<div class="span9">
    <h1>Art Class Calendar</h1>
    <hr />
    <em>Sign up for adult classes by clicking the painting on the calendar you would like to come paint.</em>
    
    <div id="bta-calendar"></div>
</div>

<script src="{{ shop.bookthatapp }}/fullcalendar/fullcalendar.js" type="text/javascript"></script>
<script src="{{ shop.bookthatapp }}/javascripts/xdate.js" type="text/javascript"></script>

<script type="text/javascript">
    function getURLParameter(name) {
        return decodeURI(
            (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
        );
    }
    
    var btacal = {
        init: function() {
            btacal.loadStyleSheet("{{ shop.bookthatapp }}/fullcalendar/fullcalendar.css");
            
            var goto = getURLParameter('goto'),
                d = new Date();
                
            if (goto != "null") {
                d = new XDate(goto);
            }
            
            var month = d.getMonth(),
                calendar = jQuery('#bta-calendar').fullCalendar({
                hiddenDays: 0, year: d.getFullYear(), month: month, date: d.getDate(), timeFormat: 'hh:mm { - hh:mm}',
                events: function(start, end, callback) {
                    $.getJSON("{{ shop.bookthatapp }}/availability/schedule.json?callback=?", {
                        start:new XDate(start).toString("i"),
                        end:new XDate(end).toString("i"),
                        handle: $('#bta-product-select').val(),
                        variant: $('#bta-variant-select').val()
                    }, function (data) {
                        var items = $.map(data.schedule, function (item, n) {
                            return $.extend(item, {
                                start:new Date(item.start[0], item.start[1] - 1, item.start[2], item.start[3], item.start[4], item.start[5]),
                                end:new Date(item.end[0], item.end[1] - 1, item.end[2], item.end[3], item.end[4], item.end[5])
                            })
                        })
                        
                        var date = $("#bta-calendar").fullCalendar('getDate'),
                            month = date.getMonth();

                        for (var index = items.length - 1; index >= 0; index--) {
                            var itemMonth = items[index].start.getMonth();
                            if (itemMonth != month) {
                                items.splice(index, 1);
                            }
                        }
                        
                        callback(items);
                        
                        calendar.fullCalendar('rerenderEvents');
                    });
                },
                eventRender: function(event, element) {
                    if (event.bookingCount >= event.capacity) {
                        element.addClass('booked-out');
                    }
                    
                    var parts = event.image.split('?'),
                        image = parts[0],
                        index = image.lastIndexOf('.'),
                        ext = image.substr(index),
                        path = image.substr(0, index),
                        div = $('<div>', {'class': 'thumb'}),
                        img = $('<img>', {'src': path + "_small" + ext + "?_=" + parts[1]});
                        
                    element.find('.fc-event-inner').append(div.append(img));
                }
            });
            
            $('#bta-product-select').change(function() {
                calendar.fullCalendar('refetchEvents');
            });
        },
        loadStyleSheet: function(url) {
            if (document.createStyleSheet) {
                document.createStyleSheet(url);
            } else {
                var link = document.createElement('link');
                link.rel = 'stylesheet';
                link.type = 'text/css';
                link.href = url;
                document.getElementsByTagName('head')[0].appendChild(link);
            }
        }
    }

    // if your theme loads jQuery in the footer then you may need to move the following line to the bottom of theme.liquid
    btacal.init();
</script>