Sort Summary block

Description: Sort Summary Block by Start Date or End Date

#1. Install Code

Hover on Page where you use Summary Block Event > Click Gear icon

Click Advanced > Paste this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(function() {
  function getEndDate(dateString) {
    var parts = dateString.split('–');
    if (parts.length === 2) {
      return new Date(parts[1].trim());
    }
    return new Date(0);
  }

  var items = $('.summary-item').toArray();
  
  var itemsWithDates = items.map(function(item) {
    var dateText = $(item).find('.summary-metadata-item--date').first().text();
    var endDate = getEndDate(dateText);
    return {
      element: item,
      endDate: endDate
    };
  });

  itemsWithDates.sort(function(a, b) {
    return a.endDate - b.endDate;
  });

  var container = $('.summary-item-list').first();
  container.empty();
  
  itemsWithDates.forEach(function(item) {
    container.append(item.element);
  });
});
</script>

#2. Customize

#2.1. If you want to reverse the current order, change this (Line 24)

return a.endDate - b.endDate;

To something like this.

return b.endDate - a.endDate;

#2.2. If you want to sort by Start Date, use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(function() {
  function getStartDate(dateString) {
    var parts = dateString.split('–');
    if (parts.length === 2) {
      return new Date(parts[0].trim());
    }
    return new Date(0);
  }

  var items = $('.summary-item').toArray();
  
  var itemsWithDates = items.map(function(item) {
    var dateText = $(item).find('.summary-metadata-item--date').first().text();
    var startDate = getStartDate(dateText);
    return {
      element: item,
      startDate: startDate
    };
  });

  itemsWithDates.sort(function(a, b) {
   return b.startDate - a.startDate;
  });

  var container = $('.summary-item-list').first();
  container.empty();
  
  itemsWithDates.forEach(function(item) {
    container.append(item.element);
  });
});
</script>