gterrill

.datepicker.bta-load-enable {background: url({{ 'loading.gif' | asset_url }}) no-repeat 50% 50%}

gterrill

{{ 'jquery.validate.min.js' | asset_url | script_tag }}
<div class="selector-wrapper">
    {% capture attribute %}booking-start{% endcapture %}
    <label for="{{ attribute }}">From:</label>
    <input id="{{ attribute }}" type="text" name="attributes[{{ attribute }}]" size="12" class="datepicker bta required bta-load-enable" value="{{ cart.attributes.booking-start }}" />
</div>
<div class="selector-wrapper">
    {% capture attribute %}booking-finish{% endcapture %}
    <label for="{{ attribute }}">To:</label>
    <input id="{{ attribute }}" type="text" name="properties[{{ attribute }}]" size="12" class="datepicker bta required bta-load-enable" value="{{ cart.attributes.booking-finish }}"  />

gterrill

eventRender: function(event, element) {
  if (event.bookingCount >= event.capacity) {
    element.addClass('booked-out');
  }
  
  var image = event.image.split('?')[0],
      index = image.lastIndexOf('.'),
      ext = image.substr(index),
      path = image.substr(0, index),
      div = $('<div>', {'class': 'thumb'}),

gterrill

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

gterrill

<!-- inside cart.items for loop -->
                    {% for p in item.properties %}
                        {% unless p.last == blank %}
                            <span class="date" data-date="{{ p.last | date:'%c' }}" data-duration="{{ item.variant.metafields.bookthatapp.duration }}">{{ p.first | replace: 'booking-start', 'Date' | replace: 'booking-time', 'Time' }}:&nbsp{% if p.last contains '/uploads/' %}{{ p.last | split: '/' | last }}{% else %}{{ p.last }}{% endif %}</span><br />
                        {% endunless %}
                    {% endfor %}


<script type="text/javascript">// at the bottom of cart.liquid
    pad = function(n) {

gterrill

{{ 'api.jquery.js' | shopify_asset_url | script_tag }}

<script type="text/javascript">
  var variant = 231075270, // delivery item
      count = 0, existing = 0, cart = {{ cart | json }};
  
  var returnToCart = function(line_item) { 
    window.location.href = '/cart';
  };
  

gterrill

<script type="text/javascript">
var bta = {
    product_id: {{ product.id }},
    callbacks: {
        dateSelected: function(input, date) {
            checkAvailable();
        },
        available: function(data) { // invoked after availability data from BookThatApp is loaded via Ajax.
            checkAvailable();
        }

gterrill

function customRange(input) {
    jQuery(input).addClass('openDatepicker');
    
    var min = new Date(), // Minimum date is today
        dateMin = min,
        dateMax = null,
        dayRange = 7; // Set this to the range of days you want to restrict to

    if (input.id === "booking-start") {
        if ($("#booking-finish").datepicker("getDate") != null) {

gterrill

function addToCart(e){
  if (typeof e !== 'undefined') e.preventDefault();
  
  if (!$('form[action="/cart/add"]').valid()) {
    return;
  }
  
  var form = $(this).parents('form'), 
      data = [];
      

gterrill

/*
This code is now deprecated. Please contact the helpdesk if you need help with choosing a variant based on the date range chosen
*/
jQuery.fn.reverse = [].reverse;

function selectVariant() {
    var start = $('#booking-start').datepicker('getDate'),
        finish = $('#booking-finish').datepicker('getDate');
        
    if (start && finish) {