Changing wording of the "Back to All Events" link on an event view and the URL it goes to.

Site URL: https://sheep-smilodon-x2a6.squarespace.com

This is the page you end up on when you click on an event in the calendar. Instead of saying "Back to All Events" I want it to say "Back to Calendar" and it want to change the URL link to the calendar page (/monthly-calendar).

I've seen this question answered in the forum before but the codes don't seem to pertain to my situation.

You can add the following Javascript via Code Injection. Just edit the values of the UPDATED_TEXT and UPDATED_URL variables in the code to what you want. I went ahead and used the values you provided.

JavaScript

(function($){

  var UPDATED_TEXT = 'Back To Calendar';
  var UPDATED_URL = '/monthly-calendar';

  /*********************************************************
   * DO NOT EDIT BELOW THIS LINE
   **********************************************************/
  if(!$) {
    var s = document.createElement('script');
    s.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
    s.integrity = 'sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=';
    s.crossorigin = 'anonymous';
    s.onload = init;
    document.body.appendChild(s);
  } else {
    $(document).ready(init);
  }

  function init(){
    var $backLink = $('.eventitem-backlink');
    var url = UPDATED_URL || $backLink.attr('href');
    var text = UPDATED_TEXT || $backLink.html();
    $backLink
      .html(text)
      .attr('href', url);

  }
})(jQuery);

Make sure the code above is in between <script></script> tags. e.g.:

<script>
  // JS code goes here
</script>

16 hours ago, jpeter said:

You can add the following Javascript via Code Injection. Just edit the values of the UPDATED_TEXT and UPDATED_URL variables in the code to what you want. I went ahead and used the values you provided.

JavaScript

(function($){

  var UPDATED_TEXT = 'Back To Calendar';
  var UPDATED_URL = '/monthly-calendar';

  /*********************************************************
   * DO NOT EDIT BELOW THIS LINE
   **********************************************************/
  if(!$) {
    var s = document.createElement('script');
    s.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
    s.integrity = 'sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=';
    s.crossorigin = 'anonymous';
    s.onload = init;
  } else {
    $(document).ready(init);
  }

  function init(){
    var $backLink = $('.eventitem-backlink');
    var url = UPDATED_URL || $backLink.attr('href');
    var text = UPDATED_TEXT || $backLink.html();
    $backLink
      .html(text)
      .attr('href', url);

  }
})(jQuery);

 

Make sure the code above is in between <script></script> tags. e.g.:

<script>
  // JS code goes here
</script>

 

jpeter, This code was awesome and worked like a charm! Thank you so much!

@MarLo56 I see some blocks on tablet doesnt look good.

You can add this to Design > Custom CSS > Then save & reload your site

/* Fix tablet posters */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-604c098eb1aad7403ed12db2 .image-inset {
    padding-bottom: 200% !important;
}
}

@tuanphan

Thank you so much for noticing that issue and sending me the correction! You're amazing! The site was just published today and it fixed the problem for iPad viewing.