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
This commit is contained in:
michaelschal committed 2025-08-18 12:54:40 +00:00
1 parent 7087883c3b
commit 1256b6e432
2 files changed
+31 -1

No files matched your search

+26
View File
@@ -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;
}