Calendar template that displays upcoming classes in a table (/apps/bookthatapp/calendar)

calendar.template.html

<div>
<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>
</div>

<script type="text/javascript">
var btacal = {
    init: function() {
        $('#bta-product-select').change(btacal.loadClasses);
    },
    loadClasses: function() {
        var start = Date.today(), end = Date.today().add(6).months();

        $('#classes').empty().append("<tr><td class='loading'>Loading...</td></tr>");
        
        $.getJSON("{{ shop.bookthatapp }}/availability/schedule.json?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) {
            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);
            });
            
            if (events.length == 0) {
                $('#classes td.loading').text('No classes found');
            } else {
                $('#classes td.loading').parent().remove();
            }
            
            $.each(events, function(i, e) {
                if (i > 30) {
                    return false;
                }
                
                var row = $('<tr>'),
                    available = (e.bookingCount < e.capacity),
                    remaining = (e.capacity - e.bookingCount),
                    a = $('<span>', {text: e.title});
              
                  if (available) {
                    a = $('<a>', {href: '/products/' + e.handle + '?' + 'class=' + e.start.toString("yyyy-MM-dd"), text: e.title});
                }
                
                row.append($('<td class="day">').append(e.start.toString('ddd dd<br/>MMM yyyy')));
                row.append($('<td class="product">').append(a));
                
                if (available) {
                    if (remaining < 4) {
                        row.append($('<td class="available">').append(remaining + (remaining == 1 ? ' Place' : 'Places') + ' Left'));
                    } else {
                        row.append($('<td class="available">').append('Space Available'));
                    }
                } else {
                    row.append($('<td class="available">').append('Booked Out'));
                    radio.attr('disabled', 'disabled');
                }
                $('#classes').append(row);
            })
        });
    }
}

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