Upcoming events list embedded in a regular page

gistfile1.html

{% capture bta_url %}{{ shop.permanent_domain | split: '.' | first }}.bookthatapp.com{% endcapture %}
{% assign product_ids = "" %}{% for product in collections.events.products %}{% capture product_ids %}{{ product_ids }}{% unless forloop.first %},{% endunless %}{{ product.id }}{% endcapture %}{% endfor %}
<script src="//{{ bta_url }}/fullcalendar2/lib/moment.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
  var today = moment(),
      btacal = {
    load: function() {
      if ($('#events').length == 0) return;
      
      $('#events').empty().append("<tr><td class='loading'>Loading...</td></tr>");
      
      var filter = {
            start: today.format(), 
            end: today.clone().add(3, 'months').format(),
            products: '{{ product_ids }}'
          };

      $.getJSON("//{{ bta_url }}/availability/schedule.json?callback=?", filter, btacal.display);
	},
    display: function(data) {
        if (data.schedule.length == 0) {
          $('#events td.loading').text('No classes found');
        } else {
          $('#events td.loading').parent().remove();
        }

        var events = $.map(data.schedule, function (item, n) {
          return $.extend(item, {
            start: btacal.createMoment(item.start),
            end: btacal.createMoment(item.end)
          })
        }).sort(function(a, b) {
          return a.start > b.start ? 1 : a.start < b.start ? -1 : 0;
        });
        
        var midnight = today.startOf('day');
        $.each(events, function(i, e) {
          var row = $('<tr>'),
              available = e.bookingCount < e.capacity,
              remaining = e.capacity - e.bookingCount,
              a = $('<span>', {text: e.title});

          if (available && e.start.isAfter(midnight)) {
            a = $('<a>', {href: '/products/' + e.handle + '?' + 'select=' + e.start.format('YYYY-MM-DDTHH:mm'), text: e.title});
          }

          row.append($('<td>').append(e.start.format('LLL')));
          row.append($('<td>').append(a));

          $('#events').append(row);
        });
    },
    createMoment: function(date) {
        var clone = date.slice(0);
        clone[1] = date[1] - 1; // convert to 0 based month
        return moment(clone);
    }
  };
  
  btacal.load();
});
</script>