Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

date range in event summary thumbnails


bewell

Question

7 answers to this question

Recommended Posts

  • 0

Have you solved it yet?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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 best , and see my profile. Thanks for your support!

Link to comment
  • 0

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
  • 0

@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 best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...