From 417eb083477eb03075695b786931b3ff0561d9e2 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 5 Nov 2025 15:41:41 +0000
Subject: [PATCH] Improve calendar display order for mobile and past events

Update the sorting logic in the calendar component to correctly display today's date first, followed by future dates chronologically, and then past dates in reverse chronological order.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: 7337d6ee-ece8-4ec0-961d-63d6b86d3194
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/ofL5rPP
---
 client/src/components/calendar-list-view.tsx | 21 +++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/client/src/components/calendar-list-view.tsx b/client/src/components/calendar-list-view.tsx
index 2ddbce7..b8e8577 100644
--- a/client/src/components/calendar-list-view.tsx
+++ b/client/src/components/calendar-list-view.tsx
@@ -42,14 +42,29 @@ export default function CalendarListView({ scheduledPosts, onEditPost, onDeleteP
     return acc;
   }, {});
 
-  // Sort dates - put today first, then chronological order
+  // Sort dates - put today first, then future dates in ascending order, then past dates
   const today = format(new Date(), "yyyy-MM-dd");
   const sortedDates = Object.keys(groupedPosts).sort((a, b) => {
     // Today always comes first
     if (a === today && b !== today) return -1;
     if (b === today && a !== today) return 1;
-    // Otherwise chronological order
-    return a.localeCompare(b);
+    
+    // Both are not today - separate future and past dates
+    const aIsFuture = a > today;
+    const bIsFuture = b > today;
+    
+    // Both are future: ascending chronological order (soonest first)
+    if (aIsFuture && bIsFuture) {
+      return a.localeCompare(b);
+    }
+    
+    // Both are past: ascending chronological order (most recent past first)
+    if (!aIsFuture && !bIsFuture) {
+      return b.localeCompare(a);
+    }
+    
+    // One is future, one is past: future comes first
+    return aIsFuture ? -1 : 1;
   });
 
   const toggleDate = (date: string) => {