Display events using list view

collection.classes.liquid

{%- paginate collection.products by settings.pagination_limit -%}

{%- assign product_ids = "" -%}
{%- for product in collection.products -%}
	{%- capture product_ids -%}{{ product_ids }}{%- unless forloop.first -%},{%- endunless -%}{{ product.id }}{%- endcapture -%}
{%- endfor -%}

<div id="content">
  <div class="container">
    {% include 'breadcrumb' %}
    <div class="catalog_c">
    
      {% if collection.image or collection.description.size > 0 %}
      <div class="row">
        <div class="col-sm-12">
          <div class="box collection-box animated rollIn" data-animation="rollIn" >
            {% if collection.image %}
            <img src="{{ collection | img_url: 'master' }}" alt="{{ collection.title }}" />
            {% endif %}
            {% if collection.description.size > 0 %}
            <div class="rte">
              {{ collection.description }}
            </div>
            {% endif %}
          </div>
        </div>
      </div>
      {% endif %}

      <div class="title clearfix">
        <h1>{{ collection.title }}</h1>
      </div>

      <div class="row">
        <div class="col-sm-12">
          <div class="">
            <div class="row view-grid animated  fadeInUp" data-animation="fadeInUp" >
              {% if collection.products %}
              <div id='bta-calendar' class='infor_c animated rollIn animation-done'></div>
              {% else %}
              <p class="no-products">{{ 'collections.general.no_matches' | t }}</p>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endpaginate %}

{%- capture bta_url -%}//{{ shop.permanent_domain | split: '.' | first }}.bookthatapp.com{%- endcapture -%}
<link href="{{ bta_url }}/fullcalendar2/fullcalendar.min.css" rel='stylesheet' />
<script src="{{ bta_url }}/fullcalendar2/lib/moment.min.js" type="text/javascript"></script>
<script src="{{ bta_url }}/fullcalendar2/fullcalendar.min.js" type="text/javascript"></script>

<script>
  EventList = function() {
    _this = this;
    _calendar = null;
    _today = new Date(),
    
    this.load = function() {
      _calendar = $('#bta-calendar').fullCalendar({
        header: {
          left: 'prev,next today',
          center: 'title',
          right: ''
        },
        defaultView: 'listMonth',
        contentHeight: 'auto',
        noEventsMessage: 'No classes scheduled',
        eventLimit: true, // allow "more" link when too many events
        events:  function(start, end, tz, callback) {
          _this.refresh(start, end, callback);
        },
        eventRender: function(event, element) {
          if (event.bookingCount >= event.capacity) {
            element.addClass('booked-out');
          }

          if (event.end < _this.today) {
            element.addClass('past-event');
          }

          if (event.image) {
            _this.renderImage(event, element);
          }
          
          var titleCell = element.find('.fc-list-item-title'),
              timeCell = element.find('.fc-list-item-time');
          
          timeCell.append($('<br><small>' + (event.capacity - event.bookingCount) + ' places left</small>'));
          titleCell.append($('<p>With Chef XXX</p>'));
          titleCell.append($('<a class="learn_more" href="' + event.url + '">Learn more »</a>'));
        }
      });
    };
    
    this.map = function(schedule) {
      return $.map(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])
        });

        // prevent clicking through to past events or products already booked out
        if (result.start < _this.today || result.bookedOut) {
          delete result.url;
        }

        return result;
      });

    };
    
    this.renderImage = function(event, element) {
      var parts = event.image.split('?'),
          image = parts[0],
          index = image.lastIndexOf('.'),
          ext = image.substr(index),
          path = image.substr(0, index),
          div = $('<div>', {'class': 'fc-thumb'}),
          img = $('<img>', {'src': path + "_small" + ext + "?_=" + parts[1]});

      element.find('.fc-list-item-marker').empty().append(div.append(img));
    };
    
    this.refresh = function(start, end, callback) {
      var params = {
        start: start.format(),
        end: end.format(),
      }

      $.getJSON("{{ bta_url }}/availability/schedule.json?callback=?", params, function (data) {
		callback(_this.map(data.schedule));            
      })
    };
  };
  
  document.addEventListener("DOMContentLoaded", function(event) {
    eventList = new EventList();
    eventList.load();
  })
</script>