manque la deuxième moitié

src/pages/Home/HomePage.jsx

@@ -1,14 +1,7 @@
 import { useState } from "react";
 import styles from "./HomePage.module.css";
 
-
 function HomePage() {
-    const today = new Date();
-    const [currentMonth, setCurrentMonth] = useState(today.getMonth());
-    const [currentYear, setCurrentYear] = useState(today.getFullYear());
-    const [selectedDay, setSelectedDay] = useState(null);
-
-    // Exemple d'événements : tu pourras ensuite les charger d'une base de données ou d'un fichier JSON
     const events = {
         "2025-11-07": ["Réunion de projet", "Anniversaire de Marie"],
         "2025-11-10": ["Cours de React", "Rendez-vous médecin"],
@@ -20,7 +13,17 @@ function HomePage() {
         "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
     ];
 
-    // Calcul des jours
+    const today = new Date();
+    const [currentMonth, setCurrentMonth] = useState(today.getMonth());
+    const [currentYear, setCurrentYear] = useState(today.getFullYear());
+    const [selectedDay, setSelectedDay] = useState(() => {
+        const year = today.getFullYear();
+        const month = String(today.getMonth() + 1).padStart(2, "0");
+        const day = String(today.getDate()).padStart(2, "0");
+        const key = `${year}-${month}-${day}`;
+        return { date: key, events: events[key] || [] };
+    });
+
     const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
     const firstDay = new Date(currentYear, currentMonth, 1).getDay();
     const startDay = (firstDay + 6) % 7;
@@ -30,23 +33,35 @@ function HomePage() {
     for (let i = 1; i <= daysInMonth; i++) days.push(i);
 
     const handlePrevMonth = () => {
-        if (currentMonth === 0) {
+        let newMonth = currentMonth - 1;
-            setCurrentMonth(11);
+        let newYear = currentYear;
-            setCurrentYear(currentYear - 1);
+
-        } else {
+        if (newMonth < 0) {
-            setCurrentMonth(currentMonth - 1);
+            newMonth = 11;
+            newYear--;
         }
-        setSelectedDay(null);
+
+        setCurrentMonth(newMonth);
+        setCurrentYear(newYear);
+
+        const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
+        setSelectedDay({ date: key, events: events[key] || [] });
     };
 
     const handleNextMonth = () => {
-        if (currentMonth === 11) {
+        let newMonth = currentMonth + 1;
-            setCurrentMonth(0);
+        let newYear = currentYear;
-            setCurrentYear(currentYear + 1);
+
-        } else {
+        if (newMonth > 11) {
-            setCurrentMonth(currentMonth + 1);
+            newMonth = 0;
+            newYear++;
         }
-        setSelectedDay(null);
+
+        setCurrentMonth(newMonth);
+        setCurrentYear(newYear);
+
+        const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
+        setSelectedDay({ date: key, events: events[key] || [] });
     };
 
     const handleDayClick = (day) => {
@@ -57,12 +72,12 @@ function HomePage() {
 
     return (
         <div className={styles.glassCard}>
-            <div className={styles.calendarcontainer}>
+            <div className={styles.calendarContainer}>
-                    <div className={styles.calendarheader}>
+                <div className={styles.calendarHeader}>
-                        <button className={styles.glass} onClick={handlePrevMonth}>◀</button>
+                    <button onClick={handlePrevMonth}>◀</button>
-                        <p>{monthNames[currentMonth]} {currentYear}</p>
+                    <p>{monthNames[currentMonth]} {currentYear}</p>
-                        <button className={styles.glass} onClick={handleNextMonth}>▶</button>
+                    <button onClick={handleNextMonth}>▶</button>
-                    </div>
+                </div>
 
                 <table className={styles.calendar}>
                     <thead>
@@ -76,19 +91,24 @@ function HomePage() {
                         <th>Dim</th>
                     </tr>
                     </thead>
+
                     <tbody>
                     {Array.from({ length: Math.ceil(days.length / 7) }).map((_, weekIndex) => (
                         <tr key={weekIndex}>
                             {days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => {
                                 const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
                                 const hasEvent = events[key];
+
                                 return (
                                     <td
                                         key={index}
                                         className={[
-                                            day === today.getDate() && currentMonth === today.getMonth() && currentYear === today.getFullYear() ? "today" : "",
+                                            day === today.getDate() &&
-                                            hasEvent ? "has-event" : "",
+                                            currentMonth === today.getMonth() &&
-                                            selectedDay?.date === key ? "selected" : ""
+                                            currentYear === today.getFullYear()
+                                                ? styles.today : "",
+                                            hasEvent ? styles.hasEvent : "",
+                                            selectedDay?.date === key ? styles.selected : ""
                                         ].join(" ")}
                                         onClick={() => handleDayClick(day)}
                                     >
@@ -101,10 +121,10 @@ function HomePage() {
                     </tbody>
                 </table>
 
-                {/* Box d’événements */}
                 {selectedDay && (
-                    <div className={styles.eventbox}>
+                    <div className={styles.eventBox}>
                         <h3>Événements du {selectedDay.date}</h3>
+
                         {selectedDay.events.length > 0 ? (
                             <ul>
                                 {selectedDay.events.map((ev, i) => (
@@ -121,4 +141,4 @@ function HomePage() {
     );
 }
 
-export default HomePage;
+export default HomePage;

src/pages/Home/HomePage.module.css

@@ -1,54 +1,41 @@
-.calendarcontainer {
+.calendarContainer {
-    width: 50%;
     padding: 20px;
     font-family: Arial, sans-serif;
-    text-align: center;
+    display: flex;
-    justify-content: center;
+    flex-direction: column;
+    align-items: center;
 }
 
-.calendarheader {
+.calendarHeader {
     display: flex;
+    width: 100%;
     flex-direction: row;
+    justify-content: space-between;
     align-items: center;
     gap: 10px;
 }
 
-.glass{
+.calendarHeader p {
-    background: rgba(255, 255, 255, 0.075);
-    border-radius: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    backdrop-filter: blur(10px);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-    transition: transform 0.5s ease;
-}
-
-.calendarheader p{
     width: auto;
     text-align: center;
     font-weight: bold;
     font-size: 40px;
 }
 
-.calendarheader button {
+.calendarHeader button {
+    top: 50%;
+    left: 50%;
     width: 40px;
     height: 40px;
+    border-radius: 50%;
+    border: none;
+    background: transparent;
+    box-shadow:
+            inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
+            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1);
     font-size: 15px;
     color: #019AFF;
-    border: none;
-    border-radius: 50%;
     cursor: pointer;
-    background-color: transparent;
-}
-
-.glass{
-    width:50px;
-    height:50px;
-    border-radius:50%;
-    background:rgba(255,255,255,.08);
-    box-shadow:0 0 0 2px rgba(255,255,255,.6),0 16px 32px rgba(0,0,0,.12);
-    place-items:center;
-    cursor:pointer;
-    outline:0;
 }
 
 .calendar {
@@ -58,50 +45,80 @@
 }
 
 .calendar th, .calendar td {
-    border: 1px solid #ddd;
+    border: none;
     padding: 10px;
     width: 14.2%;
+    line-height: 130%;
     text-align: center;
     cursor: pointer;
 }
 
-.calendar th {
-    background-color: #f2f2f2;
-}
-
 .today {
-    background-color: #007bff;
+    color: #007bff;
-    color: white;
-    border-radius: 50%;
 }
 
-.hasevent {
+.hasEvent {
-    background-color: #e7f3ff;
+    position: relative;
-    font-weight: bold;
+}
+
+.hasEvent::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    bottom: 10px;
+    width: 20px;
+    height: 2px;
+    background-color: #007bff;
+    transform: translateX(-50%);
+    border-radius: 10px;
+}
+
+.hasEvent.selected::before {
+    width: 25px;
+    height: 2px;
+    bottom: 10px;
 }
 
 .selected {
-    outline: 3px solid #007bff;
+    position: relative;
+    font-size: 18px;
+    font-weight: 600;
 }
 
-.eventbox {
+.selected::after {
-    background-color: #f9f9f9;
+    content: "";
-    border-radius: 10px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    transform: translate(-50%, -50%);
+    border-radius: 38%;
+    pointer-events: none;
+    background: transparent;
+    box-shadow:
+            inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
+            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1);
+}
+
+.eventBox {
+    border-radius: 20px;
     padding: 15px;
-    margin-top: 20px;
+    margin-top: 16px;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    border: none;
-    width: 80%;
+    background: rgb(255, 255, 255, 0.25);
-    max-width: 500px;
+    box-shadow:
-    text-align: left;
+            inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
+            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1);
 }
 
-.eventbox ul {
+.eventBox ul {
     list-style-type: disc;
-    margin-left: 20px;
 }
 
 .glassCard {
-    width: 100%;
+    width: 45%;
+    margin: 16px;
     padding: 10px 20px 10px 20px;
     height: fit-content;
     background: rgba(255, 255, 255, 0.65);