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

- Next Two Weeks + 6-Week Calendar View

@@ -96,11 +97,12 @@ export default function CalendarView({ tasks, onTaskDrop, onDateSelect }: Calend {/* Calendar Grid */} -
+
{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 ( handleDrop(date)} @@ -119,11 +123,13 @@ export default function CalendarView({ tasks, onTaskDrop, onDateSelect }: Calend data-testid={`calendar-date-${format(date, 'yyyy-MM-dd')}`} >
-
+
{format(date, 'EEE')}
{format(date, 'd')}
@@ -181,6 +187,10 @@ export default function CalendarView({ tasks, onTaskDrop, onDateSelect }: Calend
Weekend
+
+
+ Previous Week +
);