ajout d'un formulaire au calendrier

3 years ago · d42a33b100
parent 7ef1e52aef
commit d42a33b100
2 changed files with 47 additions and 5 deletions
--- a/src/pages/Calendrier.js
+++ b/src/pages/Calendrier.js
@ -1,4 +1,5 @@
-import React, {Pages} from 'react';
+import React, { useState } from 'react';
+import "react-datepicker/dist/react-datepicker.css";
 import NavigationDashboard from '../components/NavigationDashboard';
 import format from "date-fns/format";
 import getDay from "date-fns/getDay";
@ -7,7 +8,7 @@ import startOfWeek from "date-fns/startOfWeek";
 import { Calendar, dateFnsLocalizer } from "react-big-calendar";
 import "react-big-calendar/lib/css/react-big-calendar.css";
 import DatePicker from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
+

 const locales = {
    "en-US": require("date-fns/locale/en-US"),
@ -39,7 +40,18 @@ const locales = {
    },
  ];

+    
+
+
 const Calendrier = () => {
+
+    const [newEvent, setNewEvent] = useState({Titre: "", Début: "", Fin:""});
+    const [allEvents, setAllEvents] = useState(events);
+
+    function handleAddEvent() {
+        setAllEvents([...allEvents, newEvent])
+    }
+
    return (
        <body>

@ -64,8 +76,19 @@ const Calendrier = () => {
                <div className="bas_de_page">
                    <NavigationDashboard />
                    <div className="Calendrier">
-                    <Calendar localizer={localizer} events={events} 
-                    startAccessor="start" endAccessor="end" style={{height: "100%", width:"95%"}}/>
+                    <h2>Ajouter un évènement</h2>
+                    <div className="mini_formulaire_evenement">
+                        <input type="text" placeholder="Ajoutez un titre" style={{height: "50%", width: "100%", marginRight: "10px"}} 
+                            value={newEvent.Titre} onChange={(e) => setNewEvent({...newEvent, Titre: e.target.value})}
+                        />
+                        <DatePicker placeholderText="Date de début" style={{marginRight: "10px"}}
+                        selected={newEvent.Début} onChange={(Début) => setNewEvent({...newEvent, Début})} />
+                        <DatePicker placeholderText="Date de fin"
+                        selected={newEvent.Fin} onChange={(Fin) => setNewEvent({...newEvent, Fin})} />
+                        <button onClick={handleAddEvent}>Ajouter l'évènement</button>
+                    </div>
+                    <Calendar localizer={localizer} events={allEvents} 
+                    startAccessor="start" endAccessor="end" style={{height: "100%", width:"99%"}}/>
                    </div>
                </div>
            </div>
--- a/src/styles/components/_calendrier.scss
+++ b/src/styles/components/_calendrier.scss
@ -124,7 +124,8 @@ body {

        .Calendrier {
            display: flex;
-            justify-content: center;
+            flex-direction: column;
+            align-items: center;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 15px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
@ -132,6 +133,24 @@ body {
            -webkit-backdrop-filter: blur(15px);
            width: 100%;
            margin: 5px 5px 10px 10px;
+            text-align: center;
+
+            .mini_formulaire_evenement {
+                display: flex;
+                flex-direction: row;
+                margin-top: 10px;
+            }
+
+            .rbc-calendar {
+                margin-top: 200px;
+
+                .rbc-day-bg {
+                    border-radius: 5px;
+                }
+                .rbc-month-view {
+                    border-radius: 10px;
+                }
+            }
        }
    }
 }