paul/task-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Expand calendar view to show six weeks of tasks

Browse Source 
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
This commit is contained in:
paul-nothaft
2025-09-11 14:23:51 +00:00
parent 7a73a48b63
commit 0076ad98c6
1 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/CalendarView.tsx
+18 -8
View File
@@ -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>
);