apps/pwa/src/components/CalendarShell.tsx

@@ -48,7 +48,6 @@ import { EventDetailPopover } from './EventDetailPopover.js'
 import { AppNav } from './AppNav.js'
 import { ColorLegend } from './ColorLegend.js'
 import { SkeletonCalendar } from './SkeletonCalendar.js'
-import { EmptyState } from './EmptyState.js'
 
 // ── Helpers ────────────────────────────────────────────────────────────────
 
@@ -163,11 +162,6 @@ export function CalendarShell() {
   // Determine which content to show in the calendar area
   const isInitialLoading = meQuery.isLoading || (eventsQuery.isLoading && !eventsQuery.data)
   const isEventsError = eventsQuery.isError
-  const isEmptyResult =
-    !isInitialLoading &&
-    !isEventsError &&
-    eventsQuery.isSuccess &&
-    (eventsQuery.data?.occurrences.length ?? 0) === 0
 
   const phone = isPhone()
 
@@ -264,11 +258,11 @@ export function CalendarShell() {
                 Retry
               </button>
             </div>
-          ) : isEmptyResult ? (
-            // Empty state: zero events in this window
-            <EmptyState />
           ) : (
-            // Normal: Schedule-X calendar (primary focal point)
+            // Normal: Schedule-X calendar (primary focal point).
+            // ALWAYS render the calendar even when the window has no events — its built-in
+            // header carries the navigation, so swapping in an empty-state would strand the
+            // user with no way to navigate away from an empty day/week. An empty grid is clear.
             <ScheduleXCalendar calendarApp={calendar} />
           )}
         </div>