Changing event page time from "AM/PM" to "a.m./p.m"

Like it says in the title. Is this possible? I have a client who is integrating their site into a larger collection of sites and wants all times to appear with "a.m. or p.m." instead of the default AM and PM that Squarespace events pages have. Let me know!

You mean make it lowercase & add dot between a-m, p-m??

On 2/7/2022 at 7:46 AM, tuanphan said:

You mean make it lowercase & add dot between a-m, p-m??

Hi @tuanphan! I have a client who actually wants to change this on all events from “AM/PM” to “a.m. / p.m.” Is there a way to add this punctuation with code? Thanks! (The site is https://wearecap.org/events)

@pgcreativedesigns Hi! You can add this code in Website > Pages > Website Tools > Code Injection > Header to change from “AM/PM” to “a.m. / p.m.” 

<script>
document.addEventListener("DOMContentLoaded", function() {
  const timeElements = document.querySelectorAll('.event-time-localized-start, .event-time-localized-end');
  function convertTimeFormat(timeElement) {
    let timeText = timeElement.innerHTML;
    timeText = timeText.replace('AM', 'a.m.').replace('PM', 'p.m.');
    timeElement.innerHTML = timeText;
  }
  
  timeElements.forEach(time => convertTimeFormat(time));
});
</script>

2 hours ago, Lesum said:

@pgcreativedesigns Hi! You can add this code in Website > Pages > Website Tools > Code Injection > Header to change from “AM/PM” to “a.m. / p.m.” 

<script>
document.addEventListener("DOMContentLoaded", function() {
  const timeElements = document.querySelectorAll('.event-time-localized-start, .event-time-localized-end');
  function convertTimeFormat(timeElement) {
    let timeText = timeElement.innerHTML;
    timeText = timeText.replace('AM', 'a.m.').replace('PM', 'p.m.');
    timeElement.innerHTML = timeText;
  }
  
  timeElements.forEach(time => convertTimeFormat(time));
});
</script>

 

Hi @Lesum! Thank you so much - unfortunately this didn't work. There seems to be something wrong with the initial syntax of the script. Is there something missing? Thanks!

@pgcreativedesigns The code works exactly as you described in your post. It looks like you've successfully added the code, and it's now working on your site.