From fb830c6fcc08763b5ea34f4b2ffc9ff46b762469 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Wed, 10 Dec 2025 05:37:42 +0100
Subject: [PATCH] Refactor date handling in EventsPageSection: Update
 getFirstDayOfMonth function to correctly convert UTC day of the week for
 improved calendar display. Simplify month navigation logic by directly using
 UTC date methods, enhancing clarity and functionality in event date
 management.

---
 components/EventsPageSection.tsx | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/components/EventsPageSection.tsx b/components/EventsPageSection.tsx
index 5d1c581..202b2e0 100644
--- a/components/EventsPageSection.tsx
+++ b/components/EventsPageSection.tsx
@@ -201,9 +201,13 @@ export default function EventsPageSection({
 
   const getFirstDayOfMonth = (date: Date) => {
     // Utiliser UTC pour correspondre au format des événements
+    // getUTCDay() retourne 0 (dimanche) à 6 (samedi)
+    // On convertit pour que lundi = 0, mardi = 1, ..., dimanche = 6
     const year = date.getUTCFullYear();
     const month = date.getUTCMonth();
-    return new Date(Date.UTC(year, month, 1)).getUTCDay();
+    const dayOfWeek = new Date(Date.UTC(year, month, 1)).getUTCDay();
+    // Convertir : dimanche (0) -> 6, lundi (1) -> 0, mardi (2) -> 1, etc.
+    return (dayOfWeek + 6) % 7;
   };
 
   const formatMonthYear = (date: Date) => {
@@ -238,12 +242,9 @@ export default function EventsPageSection({
         <div className="flex items-center justify-between mb-3">
           <button
             onClick={() => {
-              setCurrentMonth(
-                new Date(
-                  currentMonth.getFullYear(),
-                  currentMonth.getMonth() - 1
-                )
-              );
+              const year = currentMonth.getUTCFullYear();
+              const month = currentMonth.getUTCMonth();
+              setCurrentMonth(new Date(Date.UTC(year, month - 1, 1)));
             }}
             className="px-2 py-1 border border-pixel-gold/50 text-pixel-gold hover:bg-pixel-gold/10 rounded transition text-sm"
           >
@@ -254,12 +255,9 @@ export default function EventsPageSection({
           </h3>
           <button
             onClick={() => {
-              setCurrentMonth(
-                new Date(
-                  currentMonth.getFullYear(),
-                  currentMonth.getMonth() + 1
-                )
-              );
+              const year = currentMonth.getUTCFullYear();
+              const month = currentMonth.getUTCMonth();
+              setCurrentMonth(new Date(Date.UTC(year, month + 1, 1)));
             }}
             className="px-2 py-1 border border-pixel-gold/50 text-pixel-gold hover:bg-pixel-gold/10 rounded transition text-sm"
           >
@@ -269,7 +267,7 @@ export default function EventsPageSection({
 
         {/* Jours de la semaine */}
         <div className="grid grid-cols-7 gap-0.5 mb-1">
-          {["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"].map((day) => (
+          {["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"].map((day) => (
             <div
               key={day}
               className="text-center text-[10px] text-gray-400 font-semibold py-1"