From 1256b6e4320ed4cfb6d395a9a2a25702c8694e15 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Mon, 18 Aug 2025 12:54:40 +0000
Subject: [PATCH] Improve calendar weekend styling for better visual clarity

Apply custom CSS classes and inline styles to the Calendar component to ensure weekend days are consistently styled with a light gray background, addressing an issue where weekend backgrounds were not rendering correctly.

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 |  6 +++++-
 client/src/index.css                  | 26 ++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/client/src/components/ui/calendar.tsx b/client/src/components/ui/calendar.tsx
index a637f3b..5a23667 100644
--- a/client/src/components/ui/calendar.tsx
+++ b/client/src/components/ui/calendar.tsx
@@ -28,9 +28,13 @@ function Calendar({
         ...props.modifiers,
       }}
       modifiersClassNames={{
-        weekend: "bg-gray-100 dark:bg-gray-800",
+        weekend: "weekend-day",
         ...props.modifiersClassNames,
       }}
+      modifiersStyles={{
+        weekend: { backgroundColor: '#f3f4f6' },
+        ...props.modifiersStyles,
+      }}
       classNames={{
         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
         month: "space-y-4",
diff --git a/client/src/index.css b/client/src/index.css
index 518fc8f..994d90d 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -325,3 +325,29 @@ button[aria-current="date"]:focus-visible,
   outline: 2px solid #2563eb !important;
   outline-offset: 2px !important;
 }
+
+/* Style pour les weekends dans le calendrier - FOND GRIS CLAIR */
+.weekend-day,
+.rdp-day.weekend-day,
+.rdp-button.weekend-day {
+  background-color: #f3f4f6 !important; /* bg-gray-100 */
+}
+
+.dark .weekend-day,
+.dark .rdp-day.weekend-day,
+.dark .rdp-button.weekend-day {
+  background-color: #1f2937 !important; /* bg-gray-800 */
+}
+
+/* Forcer le style weekend sur tous les samedis et dimanches */
+[data-day-weekend="true"],
+button[data-day-weekend="true"],
+.rdp-day[data-day-weekend="true"] {
+  background-color: #f3f4f6 !important;
+}
+
+.dark [data-day-weekend="true"],
+.dark button[data-day-weekend="true"],
+.dark .rdp-day[data-day-weekend="true"] {
+  background-color: #1f2937 !important;
+}