Jump to content

date range in event summary thumbnails

Recommended Posts

  • Replies 7
  • Views 809
  • Created
  • Last Reply
  • 3 weeks later...
  • 1 month later...

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<style>

  .thumbnail-date-range-text {
  
    font-size: 0.75em;
    
    }
    
  </style>

<script>

  $( ( ) => {
  
    // add an end date to the event summary thumbnail date
  
    // this can be a character like - or a word like to
    
    const dateRangeText = 'to';
    
    // do not change anything below, there be the borg here
    
    $( '.summary-item' ).each ( function ( ) {
    
      let $this = $( this );
      
      // there are three instances of this element so we grab the first
      
      let metaDataDateText = $( '.summary-metadata-item--date:first', $this )
      
        .text ( );
        
      if ( ! metaDataDateText ) return;
      
      if ( ! metaDataDateText.includes ( '–' ) ) return;
      
      let d = new Date ( metaDataDateText.split ( ' – ' ) [ 1 ] );
      
      let $thumbnailEventDate = $( '.summary-thumbnail-event-date-inner',
      
        $this );
        
      let $dateEnd = $( '<div>' +
      
        '<span class="thumbnail-date-range-text">' +
        
          dateRangeText +
          
          '</span>' +
          
        $thumbnailEventDate.html ( ) +
        
        '</div>' )
        
          .find ( '.summary-thumbnail-event-date-month' )
          
            .text ( d.toLocaleString ( 'default', { month : 'short' } ) )
            
            .end ( )
            
          .find ( '.summary-thumbnail-event-date-day' )
          
            .text ( d.getDate ( ) )
            
            .end ( );
            
      $thumbnailEventDate.append ( $dateEnd );
      
      } );
      
    } );
    
  </script>

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 months later...

I am also looking for a solution to this issue.


Creedon - thanks for sharing this code. I tried copying it into my site's page, though, and it did not produce the change I was looking for. I am a total noob when it comes to code, however, and I'm wondering if there are some aspects of this that I need to modify?

 

Any further guidance would be much appreciated!

Link to comment

@danbrowne

Please post the URL for a page on your site where you are trying to apply this effect.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.