Hide End Times from Events in Summary Block

Site URL: https://theparkwaytheater.com/

I am trying to only show the event start time. I know the code to remove all of the time data is this ... 

.summary-metadata-item--event-time
{
   display: none !important;
}

Anyone know if there is a way to only show the start time?

Hi. It looks like you solved with this code

.event-time-24hr {
    display: none;
}

Hi @tuanphan

The code you shared removes all of the time data. I still want to see the start time. Any advice on if this is possible?

8 hours ago, rodri333 said:

Hi @tuanphan

The code you shared removes all of the time data. I still want to see the start time. Any advice on if this is possible?

This seems impossible

@tuanphan Thank you for your reply. I will tell the client it isn't possible. 

@rodri333 You can get away with this using JS, here's the code:

(function () {
  if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }

  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init() {
    var elements = document.querySelectorAll('.event-time-12hr');
    if(elements) {
      elements.forEach(function (el) {
        var time = el.textContent;
        el.textContent = time.replace(/^(\d+:\d+\s?(?:A|P)M).*$/, '$1');
      });
    }
  }
})();

Be sure to add the JS code between <script> tag, e.g.

<script>
  // Add JS code here
</script>

Here's a video of me running the script using Chrome's dev console:

@jpeter That's not working for me, any idea why not?please see the event summary in the Gather nav mega menu, "Up Next"

https://westendchurchnyc.squarespace.com/

pw: notyet

11 hours ago, dnmddy said:

@jpeter That's not working for me, any idea why not?please see the event summary in the Gather nav mega menu, "Up Next"

https://westendchurchnyc.squarespace.com/

pw: notyet

@dnmddy Try adding the code to the Footer rather than the Header. See screenshot:

7 hours ago, jpeter said:

@dnmddy Try adding the code to the Footer rather than the Header. See screenshot:

Still no luck

It is actually working correctly, but not on the summary blocks in my mega menu

On 8/20/2020 at 8:06 AM, dnmddy said:

It is actually working correctly, but not on the summary blocks in my mega menu

@dnmddy that tells me there may be javascript code for summary blocks that may be running after the code I wrote get's ran. If that's the case, I updated the code to defer when it get's ran after a period of time. I created a DEFER_LOADING variable you can update in the code below. I set it to 500 milliseconds for now.

(function () {

  // Defer loading in milliseconds.
  var DEFER_LOADING = 500;

  if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }

  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init() {
    setTimeout(function(){
      var elements = document.querySelectorAll('.event-time-12hr');
      if(elements) {
        elements.forEach(function (el) {
          var time = el.textContent;
          el.textContent = time.replace(/^(\d+:\d+\s?(?:A|P)M).*$/, '$1');
        });
      }
    }, DEFER_LOADING);
    
  }
})();

On 8/21/2020 at 12:27 PM, jpeter said:

@dnmddy that tells me there may be javascript code for summary blocks that may be running after the code I wrote get's ran. If that's the case, I updated the code to defer when it get's ran after a period of time. I created a DEFER_LOADING variable you can update in the code below. I set it to 500 milliseconds for now.

(function () {

  // Defer loading in milliseconds.
  var DEFER_LOADING = 500;

  if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }

  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init() {
    setTimeout(function(){
      var elements = document.querySelectorAll('.event-time-12hr');
      if(elements) {
        elements.forEach(function (el) {
          var time = el.textContent;
          el.textContent = time.replace(/^(\d+:\d+\s?(?:A|P)M).*$/, '$1');
        });
      }
    }, DEFER_LOADING);
    
  }
})();

 

Dang, I wish I could say that fixed it... Did you have a look at it on my site to see it in action?

Here's the static mega menu page which shows it working: https://westendchurchnyc.squarespace.com/mega-menu (pw: notyet) but if you actually toggle the mega menu from the nav bar, it doesnt work. I updated with your recent code and played around the with the time as well.

@dnmddy Modified the code a bit, try this out:
 

(function () {

  // Defer running the script in milliseconds. Default is 0.
  var DEFER_LOADING = 0;

  if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }

  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  if(window.MutationObserver && typeof window.MutationObserver === 'function') {
    var targetNode = document.querySelector('.mega-menu-container');
    if(targetNode) {
      var config = { attributes: true, childList: true, subtree: true };
      var observer = new MutationObserver(init);
      observer.observe(targetNode, config);
    }
  }

  function init() {
    setTimeout(function(){
      var elements = document.querySelectorAll('.event-time-12hr');
      if(elements) {
        elements.forEach(function (el) {
          var time = el.textContent;
          el.textContent = time.replace(/^(\d+:\d+\s?(?:A|P)M).*$/, '$1');
        });
      }
    }, DEFER_LOADING);
  }
})();

(Thank you for continuing to trouble shoot this with me)

I added the new code and it didnt work. I changed the defer loading from 0 to 500 and it didn't work, i changed it to 5000 and now it works! Although obviously there is a lag. Not ideal but better than nothing. I notice there is a also a lag before the megamenu itself works, do you think that is the primary issue? It would be great if both loaded immediately

5 minutes ago, dnmddy said:

(Thank you for continuing to trouble shoot this with me)

I added the new code and it didnt work. I changed the defer loading from 0 to 500 and it didn't work, i changed it to 5000 and now it works! Although obviously there is a lag. Not ideal but better than nothing. I notice there is a also a lag before the megamenu itself works, do you think that is the primary issue? It would be great if both loaded immediately

Oh  ok I see the issue, the content of the mega menu is being dynamically added in using Ajax and on my end it take about 2 seconds for it to load in which is why changing that value to 5000 works. You can probably play around with that value and reduce to like 3000. 

@jpeter I'm back here with a question. I thought I was correctly targeting this to only apply to the summary blocks in my mega menu, but I see it's affecting the event details page as well.

It's not hiding the end time, but it's removing the dash between times so they don't really make sense any more. I did remove the code to verify this is the culprit.

example: https://westendchurchnyc.squarespace.com/events/event-three-9ckek
pw: notyet

code:

<!--Hide end times -->
<script>
(function () {

  // Defer running the script in milliseconds. Default is 0.
  var DEFER_LOADING = 2000;

  if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }

  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  if(window.MutationObserver && typeof window.MutationObserver === 'function') {
    var targetNode = document.querySelector('.mega-menu-container');
    if(targetNode) {
      var config = { attributes: true, childList: true, subtree: true };
      var observer = new MutationObserver(init);
      observer.observe(targetNode, config);
    }
  }

  function init() {
    setTimeout(function(){
      var elements = document.querySelectorAll('.event-time-12hr');
      if(elements) {
        elements.forEach(function (el) {
          var time = el.textContent;
          el.textContent = time.replace(/^(\d+:\d+\s?(?:A|P)M).*$/, '$1');
        });
      }
    }, DEFER_LOADING);
  }
})();
</script>

@dnmddy  Hello there! Increasing the specificity should do the trick, so try replacing the line:

var elements = document.querySelectorAll('.event-time-12hr');

with

var elements = document.querySelectorAll('.mega-menu-container .event-time-12hr');

This way it only target the times in the mega menu.

@jpeter that did the trick! thank you, thank you

@jpeter I'm having this issue where I am unable to remove the end time in all summary blocks. Any advice?

https://violin-puma-x79z.squarespace.com/whats-on/all-shows

Password: temp

On 12/12/2021 at 5:57 PM, likemindedproductions said:

@jpeter I'm having this issue where I am unable to remove the end time in all summary blocks. Any advice?

https://violin-puma-x79z.squarespace.com/whats-on/all-shows

Password: temp

I just tested this code (in first comment) and It worked. Have you tried it yet? (Add to Settings > Advanced > Code Injection > Footer)

<script>
  (function () {
  if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }

  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init() {
    var elements = document.querySelectorAll('.event-time-12hr');
    if(elements) {
      elements.forEach(function (el) {
        var time = el.textContent;
        el.textContent = time.replace(/^(\d+:\d+\s?(?:A|P)M).*$/, '$1');
      });
    }
  }
})();
</script>

8 hours ago, tuanphan said:

I just tested this code (in first comment) and It worked. Have you tried it yet? (Add to Settings > Advanced > Code Injection > Footer)

<script>
  (function () {
  if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }

  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init() {
    var elements = document.querySelectorAll('.event-time-12hr');
    if(elements) {
      elements.forEach(function (el) {
        var time = el.textContent;
        el.textContent = time.replace(/^(\d+:\d+\s?(?:A|P)M).*$/, '$1');
      });
    }
  }
})();
</script>

 

Hi @tuanphan, Yes I've tried this and it doesn't work.

Andrew

I've been trying to hide the end times on the calendar view, and in the detailed event listing. I've tried all versions of the above coding, but still can't get it to work.

Here is the site: https://theburoakmadison.com/calendar

Also, is there a way to only show some events only on the calendar view and not in other summary blocks? I want to show that the venue is closed on some days only on the calendar view, so as to not have every other event on the Home or Show page say closed.