date range in event summary thumbnails

Site URL: https://www.villagewellness.net/online-workshop-schedule

Hi, I would like to display a the event range of dates rather than just the initial date of the class - on my summary. https://www.villagewellness.net/online-workshop-schedule.

Anyone have any ideas?

Have you solved it yet?

I am interested in the same problem

On 10/10/2020 at 4:35 AM, tuanphan said:

Have you solved it yet?

No - any ideas?

Still looking for solution... 

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.

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!

@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.