Automatically add “View Event” buttons to a Squarespace 7.1 Events page

Squarespace

May 18

Inexplicably, Squarespace 7.1 does not enable View Event buttons on Events index pages. Here is a way to add them automatically with a bit of custom scripting.

Place this in the Footer section of Advanced > Code Injection (you will need at least the Business plan to do this):

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
  $(function() {
    $('.eventlist-event--upcoming .eventlist-title-link').each(function() { // for only upcoming events
    //$('.eventlist-title-link').each(function() { // for ALL events
      var btnText = 'View Event';
      var btnSize = 'medium'; // or 'small' or 'large'
      var url = $(this).attr('href'); // get the link
      var $col = $(this).closest('.eventlist-column-info'); // find the container
      var $btn = $('<a href="' + url + '" class="sqs-block-button-element--' + btnSize + ' sqs-button-element--primary sqs-block-button-element">' + btnText + '</a>'); // create the button
      $col.append($btn); // add the button to the container
    });
  });
</script>

Note that if you are already adding jQuery on the page, you don't need to (shouldn't) do it again.

Possible Customizations

Change button size: 'small', 'medium', or 'large'
Change the button text from "View Event" to whatever you want.
Remove the '.eventlist-event--upcoming ' from the jQuery selector to target ALL events, not just upcoming ones

I hope that helps!