Add calendar interactions

geneit_app/package-lock.json

@@ -14,6 +14,7 @@
         "@fontsource/roboto": "^5.0.13",
         "@fullcalendar/core": "^6.1.14",
         "@fullcalendar/daygrid": "^6.1.14",
+        "@fullcalendar/interaction": "^6.1.14",
         "@fullcalendar/list": "^6.1.14",
         "@fullcalendar/react": "^6.1.14",
         "@mdi/js": "^7.2.96",
@@ -1077,6 +1078,14 @@
         "@fullcalendar/core": "~6.1.14"
       }
     },
+    "node_modules/@fullcalendar/interaction": {
+      "version": "6.1.14",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.14.tgz",
+      "integrity": "sha512-rXum5XCjq+WEPNctFeYL/JKZGeU2rlxrElygocdMegcrIBJQW5hnWWVE+i4/1dOmUKF80CbGVlXUyYXoqK2eFg==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.14"
+      }
+    },
     "node_modules/@fullcalendar/list": {
       "version": "6.1.14",
       "resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-6.1.14.tgz",

geneit_app/package.json

@@ -10,6 +10,7 @@
     "@fontsource/roboto": "^5.0.13",
     "@fullcalendar/core": "^6.1.14",
     "@fullcalendar/daygrid": "^6.1.14",
+    "@fullcalendar/interaction": "^6.1.14",
     "@fullcalendar/list": "^6.1.14",
     "@fullcalendar/react": "^6.1.14",
     "@mdi/js": "^7.2.96",

geneit_app/src/routes/family/accommodations/AccommodationsReservationsRoute.tsx

@@ -1,3 +1,16 @@
+import { DateSelectArg } from "@fullcalendar/core";
+import frLocale from "@fullcalendar/core/locales/fr";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import listPlugin from "@fullcalendar/list";
+import FullCalendar from "@fullcalendar/react";
+import {
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormLabel,
+} from "@mui/material";
 import React from "react";
 import { FamilyApi, FamilyUser } from "../../../api/FamilyApi";
 import {
@@ -7,19 +20,7 @@ import {
 import { AsyncWidget } from "../../../widgets/AsyncWidget";
 import { useFamily } from "../../../widgets/BaseFamilyRoute";
 import { FamilyPageTitle } from "../../../widgets/FamilyPageTitle";
-import {
-  FormControl,
-  FormLabel,
-  FormGroup,
-  FormControlLabel,
-  Checkbox,
-  FormHelperText,
-} from "@mui/material";
 import { useAccommodations } from "../../../widgets/accommodations/BaseAccommodationsRoute";
-import FullCalendar from "@fullcalendar/react";
-import dayGridPlugin from "@fullcalendar/daygrid";
-import frLocale from "@fullcalendar/core/locales/fr";
-import listPlugin from "@fullcalendar/list";
 
 export function AccommodationsReservationsRoute(): React.ReactElement {
   const loadKey = React.useRef(1);
@@ -55,6 +56,10 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
     setUsers(null);
   };
 
+  const onSelect = (d: DateSelectArg) => {
+    console.info(d);
+  };
+
   return (
     <>
       <FamilyPageTitle title="Réservation" />
@@ -64,7 +69,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
         errMsg="Echec du chargement de la liste des réservations !"
         build={() => (
           <div style={{ display: "flex", flexDirection: "row" }}>
-            <div style={{ flex: 2, maxWidth: "350px" }}>
+            <div style={{ flex: 1, maxWidth: "250px" }}>
               {/* Invitation status */}
               <FormControl
                 sx={{ m: 3 }}
@@ -163,7 +168,9 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
             {/* The calendar */}
             <div style={{ flex: 5 }}>
               <FullCalendar
-                plugins={[dayGridPlugin, listPlugin]}
+                editable={true}
+                selectable={true}
+                plugins={[dayGridPlugin, listPlugin, interactionPlugin]}
                 initialView="dayGridMonth"
                 height="700px"
                 locale={frLocale}
@@ -172,6 +179,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
                   center: "title",
                   right: "dayGridMonth,dayGridWeek,listWeek",
                 }}
+                select={onSelect}
               />
             </div>
           </div>