From 7087883c3b9dada6d2c516c7d95cf819c941d3ea Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Mon, 18 Aug 2025 12:50:10 +0000
Subject: [PATCH] Make weekend days in the calendar display with a light gray
 background

Adds weekend highlighting to the calendar component by applying a light gray background to Saturdays and Sundays.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cc2d271b-82f0-4d6a-9302-a0b067ffb429
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/cc2d271b-82f0-4d6a-9302-a0b067ffb429/AvJXlQr
---
 client/src/components/ui/calendar.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/client/src/components/ui/calendar.tsx b/client/src/components/ui/calendar.tsx
index f525db7..a637f3b 100644
--- a/client/src/components/ui/calendar.tsx
+++ b/client/src/components/ui/calendar.tsx
@@ -13,10 +13,24 @@ function Calendar({
   showOutsideDays = true,
   ...props
 }: CalendarProps) {
+  // Définir le modificateur pour les weekends (samedi = 6, dimanche = 0)
+  const isWeekend = (date: Date) => {
+    const day = date.getDay();
+    return day === 0 || day === 6; // Dimanche ou Samedi
+  };
+
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn("p-3", className)}
+      modifiers={{
+        weekend: isWeekend,
+        ...props.modifiers,
+      }}
+      modifiersClassNames={{
+        weekend: "bg-gray-100 dark:bg-gray-800",
+        ...props.modifiersClassNames,
+      }}
       classNames={{
         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
         month: "space-y-4",