Show upcoming events using the Ajax API.

calendar.template.html

<p style="margin:10px 0">
<label for="bta-product-select">Class</label>
<select id="bta-product-select">
    <option value="">All Classes</option>
    {% for product in products %}
        <option value="{{ product.handle }}">{{ product.title }}</option>
    {% endfor %}
</select>
</p>

<table id="classes" style="width:100%;">
</table>

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="{{ shop.bookthatapp }}/javascripts/xdate.js" type="text/javascript"></script>

<script type="text/javascript">
var btacal = {
    init: function() {
        $('#bta-product-select').change(btacal.loadClasses);
        btacal.loadClasses();
    },
    loadClasses: function() {
        var date = $('#picka').datepicker('getDate'),
            start = new XDate(date), 
            end = new XDate(date).addMonths(3),
            today = new Date(),
            month = new Date(0);
            
        $('#classes').empty().append("<tr><td class='loading'>Loading...</td></tr>");
        
        $.getJSON("{{ shop.bookthatapp }}/availability/schedule?callback=?", {
            start: start.toString("yyyy-MM-dd"),
            end: end.toString("yyyy-MM-dd"),
            handle: $('#bta-product-select').val(),
            variant: $('#bta-variant-select').val()
        }, function (data) {
            if (data.schedule.length == 0) {
                $('#classes td.loading').text('No classes found');
            } else {
                $('#classes td.loading').parent().remove();
            }
            
            var events = $.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])
                })
            }).sort(function(a,b) {
                return a.start.getTime() < b.start.getTime() ? -1 : a.start.getTime() > b.start.getTime() ? 1 : a.title.localeCompare(b.title);
            });
            
            $.each(events, function(i, e) {
                var row = $('<tr>'),
                    available = (e.bookingCount < e.capacity) && (e.start.getTime() > today.getTime()),
                    remaining = (e.capacity - e.bookingCount),
                    a = $('<span>', {text: e.title});
                    
                if (e.start.getMonth() != month.getMonth()) {
                    month = new XDate(e.start.getTime());
                    btacal.header(month);
                }
              
                if (available) {
                    a = $('<a>', {href: '/products/' + e.handle + '?' + 'class=' + e.start.toString("yyyy-MM-dd"), text: e.title});
                }
                
                row.append($('<td>').append(e.start.toString('ddd dd<br/>MMM yyyy')));
                row.append($('<td>').append($('<p>').append(a)));
                
                if (available) {
                    if (remaining < 4) {
                        row.append($('<td>').append(remaining + (remaining == 1 ? ' Quick Sticks' : ' Last Seats')));
                    } else {
                        row.append($('<td>').append('Space Available'));
                    }
                } else {
                    if (e.start.getTime() < today.getTime()) {
                        row.append($('<td>').append('Course Completed'));
                    } else {
                        row.append($('<td>').append('Sold Out'));
                    }
                }
                $('#classes').append(row);
            })
        });
    },
    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);
        }
    },
    header: function(d) {
        var td = $('<td>').text(d.toString('MMMM')).attr('colspan', '3'),
            tr = $('<tr>').addClass('group').append(td);
            
        $('#classes').append(tr);
    }
}

$(document).ready(function() {
    var today = new Date();
    
    $('#picka').show();
    $('#picka').datepicker({
        onChangeMonthYear: function(yy, mm, inst) {
            var day = 1, month = mm -1;
            
            if (today.getFullYear() == yy && today.getMonth() == month) {
                day = today.getDate()
            }
            
            $('#picka').datepicker('setDate', new Date(yy, month, day, 0, 0, 0));
            
            btacal.loadClasses();
        }
    });
    
    btacal.init();
})

</script>