Merge branch 'dev' into 'eventDetail'

# Conflicts:
#   src/components/homePage/calendar.jsx
#   src/components/homePage/eventList.jsx

package-lock.json

@@ -83,7 +83,6 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -1641,7 +1640,8 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -1751,7 +1751,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1996,7 +1995,6 @@
       "integrity": "sha512-lruSgrYPVAJzKmX6EJYCg9nY+0A4VkeTLpTzf1jRD/XMjNbzD9yy7D499xmVKglwJczANYJXBvZSPGcRlon+0w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vitest/mocker": "4.0.13",
         "@vitest/utils": "4.0.13",
@@ -2020,7 +2018,6 @@
       "integrity": "sha512-oaRY+/pvwS4/sN2rE2aZh9jdli8EkXm5AidmXEbWRu2wW0omG9PmgChWCX2jsD9qRLQxXTSLl5oKezANNF6LnQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vitest/browser": "4.0.13",
         "@vitest/mocker": "4.0.13",
@@ -2195,7 +2192,6 @@
       "integrity": "sha512-9IKlAru58wcVaWy7hz6qWPb2QzJTKt+IOVKjAx5vb5rzEFPTL6H4/R9BMvjZ2ppkxKgTrFONEJFtzvnyEpiT+A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vitest/utils": "4.0.13",
         "pathe": "^2.0.3"
@@ -2249,7 +2245,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2484,7 +2479,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.9",
         "caniuse-lite": "^1.0.30001746",
@@ -2568,7 +2562,6 @@
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
       "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -2782,17 +2775,8 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
       "license": "MIT",
-      "dependencies": {
+      "peer": true
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
     },
     "node_modules/dom-helpers": {
       "version": "5.2.1",
@@ -2858,7 +2842,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -2922,7 +2905,6 @@
       "integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3832,6 +3814,7 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -4226,7 +4209,6 @@
       "integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "playwright-core": "1.56.1"
       },
@@ -4308,6 +4290,7 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -4323,6 +4306,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -4335,7 +4319,8 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/prompts": {
       "version": "2.4.2",
@@ -4411,7 +4396,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4494,7 +4478,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -4668,7 +4651,6 @@
       "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -4856,7 +4838,6 @@
       "integrity": "sha512-vQMufKKA9TxgoEDHJv3esrqUkjszuuRiDkThiHxENFPdQawHhm2Dei+iwNRwH5W671zTDy9iRT9P1KDjcU5Iyw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "@storybook/icons": "^1.6.0",
@@ -5360,7 +5341,6 @@
       "integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -5451,7 +5431,6 @@
       "integrity": "sha512-QSD4I0fN6uZQfftryIXuqvqgBxTvJ3ZNkF6RWECd82YGAYAfhcppBLFXzXJHQAAhVFyYEuFTrq6h0hQqjB7jIQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vitest/expect": "4.0.13",
         "@vitest/mocker": "4.0.13",

src/components/Header/Header.jsx

@@ -55,11 +55,11 @@ function Header() {
                             <NavLink to="/volunteers" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                                 Bénévoles
                             </NavLink>
-                            {/*{user?.isAdmin && (
+                            {user?.isAdmin && (
                                 <NavLink to="/admin" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                                     Administration
                                 </NavLink>
-                            )}*/}
+                            )}
                         </div>
                     </div>
 
@@ -91,11 +91,11 @@ function Header() {
                     <NavLink to="/volunteers" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                         Bénévoles
                     </NavLink>
-                    {/*{user?.isAdmin && (
+                    {user?.isAdmin && (
                         <NavLink to="/admin" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                             Administration
                         </NavLink>
-                    )}*/}
+                    )}
                 </nav>
 
 

src/components/createEventBtn/CreateEventBtn.jsx

@@ -11,10 +11,15 @@ export default function CreateEventBtn() {
     const [isOpen, setIsOpen] = useState(false);
     const [name, setName] = useState("");
     const [description, setDescription] = useState("");
+    const [start, setStart] = useState("");
+    const [end, setEnd] = useState("");
 
     const handleCreateEvent = async () => {
 
-        if(name !== "" || description !== "") await createEvent(name, description);
+        if(name !== "" || description !== "" || start !== "" || end !== "") {
+            await createEvent(name, description, start, end);
+            console.log(start);
+        }
         setIsOpen(false);
     }
 
@@ -26,16 +31,29 @@ export default function CreateEventBtn() {
             <section className={styles.section}>
                 <div className={styles.inputContainer}>
                     <h2>Titre</h2>
-                    <TextInput placeholder={"Nom de l'événement"} value={name} onChange={e => setName(e.target.value)} />
+                    <TextInput className={styles.input} placeholder={"Nom de l'événement"} value={name} onChange={e => setName(e.target.value)} />
                 </div>
 
                 <div className={styles.inputContainer}>
                     <h2>Description</h2>
-                    <TextInput placeholder={"Description de l'événement"} value={description} onChange={e => setDescription(e.target.value)} />
+                    <TextInput className={styles.input} placeholder={"Description de l'événement"} value={description} onChange={e => setDescription(e.target.value)} />
+                </div>
+
+                <div className={styles.inputContainer}>
+                    <h2>Date</h2>
+                    <div className={styles.dateInputContainer}>
+                        <div className={styles.dateInput}>
+                            <p>Début</p>
+                            <TextInput type={"datetime-local"} value={start} onChange={e => setStart(e.target.value)} />
+                        </div>
+                        <div className={styles.dateInput}>
+                            <p>Fin</p>
+                            <TextInput type={"datetime-local"} value={end} onChange={e => setEnd(e.target.value)} />
+                        </div>
+                    </div>
                 </div>
 
                 <Button onClick={handleCreateEvent} className={styles.create}>Créer</Button>
-
             </section>
         </Modal>
     </>

src/components/createEventBtn/createEventBtn.module.css

@@ -26,6 +26,14 @@
     }
 
     margin: 1em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.input {
+    width: 70%;
 }
 
 .create {
@@ -39,3 +47,13 @@
     margin-top: 15px;
     margin-bottom: 15px;
 }
+
+.dateInputContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+.dateInput {
+ margin: 1em;
+}

src/components/homePage/calendar.jsx

@@ -1,30 +1,39 @@
-import {useState} from "react";
+import { useState, useMemo, useEffect } from "react";
 import styles from "./calendar.module.css";
-import formatDateLetter from "../../utils/date/formatDateLetter.js";
+import { formatDateLetterJS } from "../../utils/date/formatDateLetter.js";
+
+function Calendar({ events = [] }) {
 
-function Calendar() {
-    const events = {
-        "2025-11-07": ["Réunion de projet", "Anniversaire de Marie"],
-        "2025-11-10": ["Cours de React", "Rendez-vous médecin"],
-        "2025-11-14": ["Sortie cinéma"],
-        "2025-11-15": ["Sortie cinéma"],
-        "2025-11-17": ["Sortie cinéma"],
-    };
     const monthNames = [
         "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
         "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
     ];
 
     const today = new Date();
+
     const [currentMonth, setCurrentMonth] = useState(today.getMonth());
     const [currentYear, setCurrentYear] = useState(today.getFullYear());
-    const [selectedDay, setSelectedDay] = useState(() => {
+    const [selectedDay, setSelectedDay] = useState(null);
-        const year = today.getFullYear();
+
-        const month = String(today.getMonth() + 1).padStart(2, "0");
+    const eventsByDate = useMemo(() => {
-        const day = String(today.getDate()).padStart(2, "0");
+        return events.reduce((acc, ev) => {
-        const key = `${year}-${month}-${day}`;
+            if (!ev?.start) return acc;
-        return {date: key, events: events[key] || []};
+
-    });
+            const dateKey = ev.start.split(" ")[0]; // YYYY-MM-DD
+            if (!acc[dateKey]) acc[dateKey] = [];
+            acc[dateKey].push(ev);
+            return acc;
+        }, {});
+    }, [events]);
+
+    useEffect(() => {
+        const key = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
+
+        setSelectedDay({
+            date: key,
+            events: eventsByDate[key] || []
+        });
+    }, [eventsByDate]);
 
     const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
     const firstDay = new Date(currentYear, currentMonth, 1).getDay();
@@ -34,87 +43,55 @@ function Calendar() {
     for (let i = 0; i < startDay; i++) days.push(null);
     for (let i = 1; i <= daysInMonth; i++) days.push(i);
 
-    const handlePrevMonth = () => {
+    const selectDay = (year, month, day) => {
-        let newMonth = currentMonth - 1;
+        const key = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
-        let newYear = currentYear;
+        setSelectedDay({
-
+            date: key,
-        if (newMonth < 0) {
+            events: eventsByDate[key] || []
-            newMonth = 11;
+        });
-            newYear--;
-        }
-
-        setCurrentMonth(newMonth);
-        setCurrentYear(newYear);
-
-        const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
-        setSelectedDay({date: key, events: events[key] || []});
-    };
-
-    const handleNextMonth = () => {
-        let newMonth = currentMonth + 1;
-        let newYear = currentYear;
-
-        if (newMonth > 11) {
-            newMonth = 0;
-            newYear++;
-        }
-
-        setCurrentMonth(newMonth);
-        setCurrentYear(newYear);
-
-        const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
-        setSelectedDay({date: key, events: events[key] || []});
     };
 
     const handleDayClick = (day) => {
         if (!day) return;
-        const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+        selectDay(currentYear, currentMonth, day);
-        setSelectedDay({date: key, events: events[key] || []});
     };
 
     return (
         <div className={`${styles.glassCard} glassCard`}>
             <div className={styles.calendarContainer}>
+
                 <div className={styles.calendarHeader}>
-                    <button onClick={handlePrevMonth}>◀</button>
+                    <button onClick={() => setCurrentMonth(m => m === 0 ? 11 : m - 1)}>◀</button>
                     <p>{monthNames[currentMonth]} {currentYear}</p>
-                    <button onClick={handleNextMonth}>▶</button>
+                    <button onClick={() => setCurrentMonth(m => m === 11 ? 0 : m + 1)}>▶</button>
                 </div>
 
                 <table className={styles.calendar}>
                     <thead>
                     <tr>
-                        <th>Lun</th>
+                        <th>Lun</th><th>Mar</th><th>Mer</th>
-                        <th>Mar</th>
+                        <th>Jeu</th><th>Ven</th><th>Sam</th><th>Dim</th>
-                        <th>Mer</th>
-                        <th>Jeu</th>
-                        <th>Ven</th>
-                        <th>Sam</th>
-                        <th>Dim</th>
                     </tr>
                     </thead>
-
                     <tbody>
-                    {Array.from({length: Math.ceil(days.length / 7)}).map((_, weekIndex) => (
+                    {Array.from({ length: Math.ceil(days.length / 7) }).map((_, w) => (
-                        <tr key={weekIndex}>
+                        <tr key={w}>
-                            {days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => {
+                            {days.slice(w * 7, w * 7 + 7).map((day, i) => {
+                                if (!day) return <td key={i}></td>;
+
                                 const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
-                                const hasEvent = events[key];
+                                const hasEvent = (eventsByDate[key]?.length ?? 0) > 0;
 
                                 return (
                                     <td
-                                        key={index}
+                                        key={i}
                                         className={[
-                                            day === today.getDate() &&
-                                            currentMonth === today.getMonth() &&
-                                            currentYear === today.getFullYear()
-                                                ? styles.today : "",
                                             hasEvent ? styles.hasEvent : "",
                                             selectedDay?.date === key ? styles.selected : ""
                                         ].join(" ")}
                                         onClick={() => handleDayClick(day)}
                                     >
-                                        {day || ""}
+                                        {day}
                                     </td>
                                 );
                             })}
@@ -129,8 +106,11 @@ function Calendar() {
 
                         {selectedDay.events.length > 0 ? (
                             <ul>
-                                {selectedDay.events.map((ev, i) => (
+                                {selectedDay.events.map(ev => (
-                                    <li key={i}>{ev}</li>
+                                    <li key={ev.id}>
+                                        <strong>{ev.name}</strong><br />
+                                        {ev.description}
+                                    </li>
                                 ))}
                             </ul>
                         ) : (

src/components/homePage/eventList.jsx

@@ -1,21 +1,17 @@
-import {useMemo} from "react";
+import { useMemo } from "react";
 import styles from "./eventList.module.css";
-import formatDateLetter from "../../utils/date/formatDateLetter.js";
+import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
-function eventList() {
+
-    const events = {
+
-        "2025-11-07": ["Réunion de projet", "Anniversaire de Marie"],
+function EventList({ events }) {
-        "2025-11-10": ["Cours de React", "Rendez-vous médecin"],
-        "2025-11-14": ["Sortie cinéma"],
-        "2025-11-15": ["Sortie cinéma"],
-        "2025-11-17": ["Sortie cinéma"],
-    };
 
     const sortedEvents = useMemo(() => {
-        return Object.entries(events)
+        return [...events].sort(
-            .map(([dateKey, eventList]) => ({date: dateKey, events: eventList}))
+            (a, b) => new Date(a.start) - new Date(b.start)
-            .sort((a, b) => new Date(a.date) - new Date(b.date));
+        );
     }, [events]);
 
+
     return (
         <div className={`${styles.glassCard} glassCard`}>
                 <h2>Liste des événements à venir</h2>
@@ -27,11 +23,15 @@ function eventList() {
                                     <strong>{formatDateLetter(eventGroup.date)}</strong>
                                 </div>
                                 <ul className={styles.eventDetails}>
-                                    {eventGroup.events.map((event, i) => (
+                                    {eventGroup.tasks.map((task, i) => (
-                                        <li key={i}>- {event}</li>
+                                        <li key={i} className={styles.eventTasks}>
+                                            <p>- {task.name} - {task.description}</p>
+                                            <p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
+                                        </li>
                                     ))}
                                 </ul>
                             </li>
+
                         ))}
                     </ul>
                 ) : (
@@ -42,4 +42,4 @@ function eventList() {
     );
 }
 
-export default eventList;
+export default EventList;

src/components/homePage/eventList.module.css

@@ -25,9 +25,8 @@
 }
 
 .eventDetails {
-    list-style: none;
+    margin-top: 10px;
     padding: 0;
-    margin: 0;
 }
 
 .dateSelected{
@@ -45,6 +44,22 @@ h2{
     padding: 10px 20px 10px 20px;
 }
 
+.eventTitle {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.title {
+    font-weight: bold;
+}
+
+.eventTasks {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
 @media (max-width: 768px) {
     .glassCard {
         width: 100%;

src/pages/Home/HomePage.jsx

@@ -1,13 +1,24 @@
 import styles from "./HomePage.module.css";
 import Calendar from "../../components/homePage/calendar.jsx";
 import EventList from "../../components/homePage/eventList.jsx";
+import { useState, useEffect } from "react";
+import getAllEvents from "../../utils/event/getAllEvents.js";
 
 function HomePage() {
+
+    const [events, setEvents] = useState([]);
+
+    useEffect(() => {
+        (async () => {
+            const data = await getAllEvents();
+            setEvents(data.data);
+        }) ()
+    }, [])
+
     return (
         <div className={styles.allContent}>
-            <Calendar />
+            <Calendar events={events} />
-
+            <EventList events={events} />
-            <EventList />
         </div>
     );
 }

src/utils/date/formatDateLetter.js

@@ -1,8 +1,22 @@
-export default function formatDateLetter(d) {
+export function formatDateLetter(d) {
     const monthNames = [
         "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
         "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
     ];
-        const [year, month, day] = d.split('-');
+
-        return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
+    const [datePart, timePart] = d.split(' ');
-};
+    const [year, month, day] = datePart.split('-');
+    const [hours, minutes] = timePart.split(':');
+
+    return `${day} ${monthNames[parseInt(month, 10) - 1]} ${year} à ${hours}:${minutes}`;
+}
+
+
+export function formatDateLetterJS(d) {
+    const monthNames = [
+        "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
+        "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
+    ];
+    const [year, month, day] = d.split('-');
+    return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
+}

src/utils/event/createEvent.js

@@ -1,6 +1,6 @@
 import getXSRFToken from "../getXSRF.js";
 
-export default async function createEvent(name, description) {
+export default async function createEvent(name, description, start, end) {
     const csrfToken = await getXSRFToken();
 
     try {
@@ -12,7 +12,7 @@ export default async function createEvent(name, description) {
                 'X-XSRF-TOKEN': csrfToken,
                 'Accept': 'application/json'
             },
-            body: JSON.stringify({ name, description }),
+            body: JSON.stringify({ name, description, start, end }),
         });
 
         const data = await response.json();