Calendar template (including location)

calendar.liquid.html

<h3>Events Calendar</h3>

{% if products.size > 1 %}
<p>
<label for="bta-product-select">Product</label>
<select id="bta-product-select">
    <option value="">All products</option>
    {% for product in products %}
        <option value="{{ product.handle }}">{{ product.title }}</option>
    {% endfor %}
</select>
<span id="bta-variant-select-wrap" style="margin-left:10px; display:none">
    <label for="bta-variant-select">Type</label>
    <select id="bta-variant-select">
        <option value="">All variants</option>
    </select>
</span>
    <label for="bta-location-select">Location</label>
    <select id="bta-location-select">
        <option value="">All locations</option>
        {% for location in locations %}
            <option value="{{ location.id }}">{{ location.name }}</option>
        {% endfor %}
    </select>
</p>
{% endif %}

<div id="bta-calendar"></div>

<script src="{{ shop.bookthatapp }}/fullcalendar2/lib/moment.min.js" type="text/javascript"></script>
<script src="{{ shop.bookthatapp }}/fullcalendar2/fullcalendar.js" type="text/javascript"></script>

<script type="text/javascript">
(function(){
    var today = new Date(),
        btacal = {
        init: function() {
            btacal.loadStyleSheet("{{ shop.bookthatapp }}/fullcalendar2/fullcalendar.css");
            jQuery('head').append('<style type="text/css">#bta-calendar button {width:inherit; max-width:inherit;}</style>');

            var calendar = jQuery('#bta-calendar').fullCalendar({
                timeFormat: 'h(:mm)t',
                defaultView: $(window).width() < 514 ? 'agendaDay' : 'month',
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                events: function(start, end, tz, callback) {
                    var params = {
                         start: start.format(),
                         end: end.format(),
                         handle: $('#bta-product-select').val(),
                         variant: $('#bta-variant-select').val()
                    }

                    if ($('#bta-location-select').length > 0) {
                        params['location'] = $('#bta-location-select').val();
                    }

                    $.getJSON("{{ shop.bookthatapp }}/availability/schedule.json?callback=?", params, function (data) {
                        callback($.map(data.schedule, function (item, n) {
                            var result = $.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])
                            });

                            if (result < today) {
                                delete result.url;
                            }

                            return result;
                        }));

                        calendar.fullCalendar('render');
                    });
                },
                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));
                    */
                },
                windowResize: function(view) {
                    btacal.resize(calendar)
                }
            });

            btacal.resize(calendar);

            $('#bta-product-select').change(btacal.updateVariants);

            $('#bta-product-select, #bta-variant-select, #bta-location-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);
            }
        },
        updateVariants : function() {
            var product = $('#bta-product-select').val();
            if (product === "") {
                $("#bta-variant-select-wrap").fadeOut();
            } else {
                $("#bta-variant-select-wrap").fadeIn();
            }

            var select = $("#bta-variant-select"), options = btacal.variants[product];
            select.empty().append($('<option>').val('').text('All Variants'));

            if (options) {
                for (var i = 0; i < options.length; i++) {
                    select.append($('<option>').val(options[i][0]).text(options[i][1]));
                }
            }
        },
        resize: function() {
            if ($(window).width() < 514){
                calendar.fullCalendar( 'changeView', 'basicDay' );
            } else {
                calendar.fullCalendar( 'changeView', 'month' );
            }
        },
        variants: {{ variants | json }}
    }

    btacal.init();
})();
</script>