Skip to content
Transom Transom C7 Calendar

Installation — Craft CMS

For a Craft CMS site, you’ll add the embed code directly to your Twig templates.

Before you start

Follow steps 1–2 of the general installation guide to install the app and find your tenant slug.

Step 1 — Add the script tag to your layout

Open your base layout template (commonly templates/_layouts/base.twig, templates/_layout.twig, or similar) and add the script tag. The recommended location is just before the closing </body> tag:

{# templates/_layouts/base.twig #}
<!DOCTYPE html>
<html lang="en">
<head>
  ...
  <link rel="preconnect" href="https://theeverythingcalendar.transom.design">
  <script src="https://theeverythingcalendar.transom.design/widget/widget.js" data-tenant="YOUR_TENANT_SLUG" defer></script>
</head>
<body>


  {% block content %}{% endblock %}


</body>
</html>

Replace YOUR_TENANT_SLUG with your Commerce7 tenant slug.

Step 2 — Add the calendar div to your template

In the template for the page where you want the calendar to appear (e.g. templates/events.twig), add the container div where you want the calendar rendered:

{# templates/events.twig #}
{% extends '_layouts/base.twig' %}


{% block content %}
  <h1>Events</h1>


  {# The calendar renders inside this div #}
  <div id="tec-calendar"></div>
{% endblock %}

Step 3 — Add your site to Allowed Origins

In The Everything Calendar app in your Commerce7 dashboard, go to the Access tab and add your site’s URL to the Allowed Origins list (e.g. https://www.yourwinery.com).

Done

Deploy your template changes and open the page in a browser. The calendar will render inside <div id="tec-calendar">.

Troubleshooting

The calendar isn’t showing up

  • Confirm the script tag is loading — check the page source or the Network tab in browser devtools
  • Confirm <div id="tec-calendar"></div> is present in the rendered HTML
  • Check that your site URL is in Allowed Origins
  • Check the browser console for errors