Events Calendar

The Events Calendar allows you to display a calendar detailing all of your scheduled events so that your customers can quickly get an overview of what is available for booking.

Notes: only products with scheduled events such as classes, tours, events, and activities will show on the calendar.

                 

We also have a more modern way to add this calendar and that is via the Calendar Widget.

 

 

Create a Menu Link

Creating a link to the Events Calendar is easy using the Main Menu link list found in the Shopify Admin. Here are the steps:

1. Go to the Online Store tab in the Shopify Admin.
2. Select the Navigation link.
3. Access the Main Menu section.
4. Click the Add menu item button.
5. Type the name of the menu item in the upper field labeled "Name".
6. In the lower field labeled "Link" paste the following address "/apps/bookthatapp/calendar".

 

Calendar Modifications 

The Events Calendar can be customized by accessing the calendar template in the app. Below are a couple of the more common requests that we have received. 

Note: the specific lines where the code is located may change, but the logic remains the same. 

Accessing the Calendar Template

1. In the app select Settings-> Templates. 

 

2. Scroll down the page until you reach the Store table.  Select the Calendar link. 

 

Remove the Images

1. Scroll to line 97 of the template. You are looking for the following segment of code. 

if (event.image) {
 btacal.renderImage(event, element);
 }

2. You can either delete the code segment in its entirety, or you can add the comment symbols around it as seen below. 

/*
if (event.image) {
 btacal.renderImage(event, element);
 }
*/

 

Display the Location Selector

1. Find the relevant code around line 24. 

{% comment %} Location is also available to filter on...
 <label for="bta-location-select">Location</label>
 <select id="bta-location-select">
 <option value="">All locations</option>
 {% for location in locations %}
 <option value="{{ location.id }}">{{ location.name }}</option>
 {% endfor %}
 </select>
 {% endcomment %}

2. Delete the {% comment %} and {% endcomment %} lines of code. 

 

Change the Time Format

The default time format uses am and pm. If instead you would like to use a 24 hour format please complete the following.

1. Scroll to around line 63. 

timeFormat: 'h(:mm)t', // H(:mm) for 24 hour clock

2. Change it to the following:

timeFormat: 'H(:mm)', // h(:mm)t for 12 hour clock

 

Allow Selecting of Past and Booked Out Events 

By default, when an event is fully booked or has already occurred you can no longer click it to reach the corresponding product page. To change this behavior so that you can always reach the product page complete the following:

1. Scroll to around line 141.

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

2. You can either delete the code segment in its entirety, or you can add the comment symbols around it as seen below. 

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

 

If you are interested in customizing this calendar further you can read more here.