Event Range for Summary Blocks

I was able to modify the code to get things to look how I wanted! Javascript and CSS below.

Event Date must be added as the Secondary Meta Tag in Summary Block Settings.
 

<script>
  $( () => {
    // Iterate over each summary item
    $( '.summary-item' ).each( function () {
      let $this = $( this );
      
      // Get the metadata date text
      let metaDataDateText = $( '.summary-metadata-item--date:first', $this ).text();
      if ( !metaDataDateText || !metaDataDateText.includes('–') ) return;

      // Extract start date and end date from the text
      let [startDateText, endDateText] = metaDataDateText.split(' – ');
      let startDate = new Date(startDateText);
      let endDate = new Date(endDateText);

      // Format the dates
      let startMonth = startDate.toLocaleString('default', { month: 'short' });
      let startDay = startDate.getDate();
      let endMonth = endDate.toLocaleString('default', { month: 'short' });
      let endDay = endDate.getDate();

      // Construct the new stacked date range element
      let $dateRange = $(
        `<div class="summary-thumbnail-event-date-range">
          <div class="summary-thumbnail-event-date-start">
            <span class="summary-thumbnail-event-date-month">${startMonth}</span>
            <span class="summary-thumbnail-event-date-day">${startDay}</span>
          </div>
          <span class="thumbnail-date-range-text">thru</span>
          <div class="summary-thumbnail-event-date-end">
            <span class="summary-thumbnail-event-date-month">${endMonth}</span>
            <span class="summary-thumbnail-event-date-day">${endDay}</span>
          </div>
        </div>`
      );

      // Replace the content of .summary-thumbnail-event-date-inner with the new range
      let $thumbnailEventDate = $( '.summary-thumbnail-event-date-inner', $this );
      $thumbnailEventDate.empty().append($dateRange);
    });
  });
</script>

//summary block event range css//

.sqs-block-summary-v2 .summary-block-setting-secondary-metadata-date .summary-metadata--secondary .summary-metadata-item--date {
font-size: 0px;}

.sqs-block-summary-v2 .summary-block-setting-secondary-metadata-date .summary-metadata--primary .summary-metadata-item:after {content: '' !important;}

  .thumbnail-date-range-text {
  
    font-size: 0.75em;
    color: @citron;
    font-family: proxima-nova, sans serif;
    }

.summary-thumbnail-event-date-range {
  display: flex; /* Arrange start date, "thru", and end date horizontally */
  align-items: center; /* Align all items vertically */
  gap: 10px; /* Add space between each element */
  padding-left: 10px;
  padding-right: 10px;
}

.summary-thumbnail-event-date-start,
.summary-thumbnail-event-date-end {
  display: flex; /* Stack month and day vertically */
  flex-direction: column;
  align-items: center; /* Center the text */
  text-align: center; /* Ensure month and day are centered */
}

.thumbnail-date-range-text {
  font-weight: bold; /* Make "thru" stand out */
  font-size: 14px; /* Adjust font size as needed */
}