From 0076ad98c63f40629b03a44f47608ffce5c43567 Mon Sep 17 00:00:00 2001
From: paul-nothaft <40865108-paul-nothaft@users.noreply.replit.com>
Date: Thu, 11 Sep 2025 14:23:51 +0000
Subject: [PATCH] Expand calendar view to show six weeks of tasks

Update CalendarView component to display a 6-week period (previous week grayed out) by modifying date generation logic and styling for previous week's dates.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/bLPlkWk
---
 client/src/components/CalendarView.tsx | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/client/src/components/CalendarView.tsx b/client/src/components/CalendarView.tsx
index 1cf393d..dac863d 100644
--- a/client/src/components/CalendarView.tsx
+++ b/client/src/components/CalendarView.tsx
@@ -5,7 +5,7 @@ import { Badge } from '@/components/ui/badge';
 import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react';
 import { Task, Label } from '@shared/schema';
 import { useQuery } from '@tanstack/react-query';
-import { addDays, format, isSameDay, startOfWeek } from 'date-fns';
+import { addDays, format, isSameDay, startOfWeek, subWeeks } from 'date-fns';
 
 interface CalendarViewProps {
   tasks: Task[];
@@ -24,9 +24,10 @@ export default function CalendarView({ tasks, onTaskDrop, onDateSelect }: Calend
     refetchOnWindowFocus: false,
   });
 
-  // Get two weeks starting from current week
-  const startDate = startOfWeek(currentDate);
-  const dates = Array.from({ length: 14 }, (_, i) => addDays(startDate, i));
+  // Get 6 weeks: 1 previous week (grayed out) + current week + 4 future weeks
+  const currentWeekStart = startOfWeek(currentDate);
+  const startDate = subWeeks(currentWeekStart, 1); // Start from 1 week before current week
+  const dates = Array.from({ length: 42 }, (_, i) => addDays(startDate, i));
 
   const getTasksForDate = (date: Date) => {
     return tasks.filter(task => 
@@ -68,7 +69,7 @@ export default function CalendarView({ tasks, onTaskDrop, onDateSelect }: Calend
         <div className="flex items-center gap-2">
           <Calendar className="w-5 h-5 text-primary" />
           <h2 className="text-lg font-semibold" data-testid="text-calendar-title">
-            Next Two Weeks
+            6-Week Calendar View
           </h2>
         </div>
         
@@ -96,11 +97,12 @@ export default function CalendarView({ tasks, onTaskDrop, onDateSelect }: Calend
       </div>
 
       {/* Calendar Grid */}
-      <div className="grid grid-cols-2 sm:grid-cols-7 gap-2">
+      <div className="grid grid-cols-7 gap-2">
         {dates.map((date, index) => {
           const dayTasks = getTasksForDate(date);
           const isToday = isSameDay(date, new Date());
           const isWeekend = date.getDay() === 0 || date.getDay() === 6;
+          const isPreviousWeek = index < 7; // First 7 days are the previous week
           
           return (
             <Card 
@@ -109,6 +111,8 @@ export default function CalendarView({ tasks, onTaskDrop, onDateSelect }: Calend
                 isToday ? 'ring-2 ring-primary' : ''
               } ${
                 isWeekend ? 'bg-muted/30' : ''
+              } ${
+                isPreviousWeek ? 'opacity-50 bg-muted/60' : ''
               }`}
               onDragOver={handleDragOver}
               onDrop={() => handleDrop(date)}
@@ -119,11 +123,13 @@ export default function CalendarView({ tasks, onTaskDrop, onDateSelect }: Calend
               data-testid={`calendar-date-${format(date, 'yyyy-MM-dd')}`}
             >
               <div className="text-center mb-2">
-                <div className="text-xs text-muted-foreground font-medium">
+                <div className={`text-xs font-medium ${
+                  isPreviousWeek ? 'text-muted-foreground/60' : 'text-muted-foreground'
+                }`}>
                   {format(date, 'EEE')}
                 </div>
                 <div className={`text-sm font-semibold ${
-                  isToday ? 'text-primary' : ''
+                  isToday ? 'text-primary' : isPreviousWeek ? 'text-muted-foreground/60' : ''
                 }`}>
                   {format(date, 'd')}
                 </div>
@@ -181,6 +187,10 @@ export default function CalendarView({ tasks, onTaskDrop, onDateSelect }: Calend
           <div className="w-3 h-3 rounded-full bg-muted"></div>
           <span>Weekend</span>
         </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-muted opacity-50"></div>
+          <span>Previous Week</span>
+        </div>
       </div>
     </div>
   );