All Collections
Website Builders Troubleshooting
Square Space
Your events calendar doesn't load on Squarespace without reloading the page?
Your events calendar doesn't load on Squarespace without reloading the page?

Explanation and latest fix.

Jason Alexis avatar
Written by Jason Alexis
Updated over a week ago

2024.03.22: Sometimes, new embeds do not show up in on builder pages until published. We suggest using a test page or private mode to set things up. Once things are set as you want them, you can update the actual page or make your private page public.

Is this your issue? 

When JavaScript has been added to a newer template, it doesn't always work until the page/site is refreshed. Why? 

Perhaps it is because you are using a 3rd-party template or plugin using Ajax. It might be an older plugin or template that is conflicting with our embed.

This Ajax loading tries to allow you to load a page without reloading all the content. Hence our script is not being detected.  

So what can you do?

Current Fix (Main Solution)

Based on information on the Squarespace website, we made some changes to our code, and it appears to be working for Squarespace websites. Remember: these fixes are workarounds for a 3rd party application and may break in the future. Just let us know. 

Steps
The following change should be made to your Squarespace page in order to make it work: When editing the Squarespace page, visit  *Settings* -> *Advanced* -> *Code Injection*, then:

1. Paste the embeddable script code (the standard one from the sync.ccb.events installation tab:

 <script async id="sync-ccb-script" src="https://sync.ccb.events/js/calendar.min.js"></script>

2. Paste the following snippet below the code pasted in point 1:

<script>
  document.addEventListener('DOMContentLoaded', init);
  window.addEventListener('mercury:load', init);
 
  function init(){
    setTimeout(function() {
    if (window.launchCCBEvents) {
      window.launchCCBEvents();
    }
  }, 500);
}
</script>

---------------------------------------------------STOP------------------------------------------

Previous solution (may no longer be needed)

The best solution is to source new Ajax-enabled code. If you are using code provided by a third-party company, ask them for an Ajax-enabled version to work with Squarespace.

However, if you find code on this site or on a similar site, that isn't Ajax compatible, you have two choices.

  • Hire a developer to write you some better code.

  • Use the code you've found and disable the Ajax features on your site.

It's worth noting that disabling Ajax is not a solution. It's just a workaround. It will allow you to run old code that hasn't been written to work with Ajax-enabled sites, but if you disable it, you will lose many more features that improve the performance of Squarespace sites.

If your template uses Ajax loading (all the Brine-family templates do) and you want to disable Ajax, you can do so in the Style Editor. 

To disable Ajax:

Open a Blog Page then, in the Home Menu, click Design, and then click Style Editor.

Scroll down to Site: Loading.

Uncheck Enable Ajax Loading.

This workaround will fix the issue, but it will disable Infinite Scroll and all Ajax features.

 

Did this answer your question?