diff --git a/src/pages/Calendrier.js b/src/pages/Calendrier.js index ae146a5..502a857 100644 --- 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 ( @@ -64,8 +76,19 @@ const Calendrier = () => {
- +

Ajouter un évènement

+
+ setNewEvent({...newEvent, Titre: e.target.value})} + /> + setNewEvent({...newEvent, Début})} /> + setNewEvent({...newEvent, Fin})} /> + +
+
diff --git a/src/styles/components/_calendrier.scss b/src/styles/components/_calendrier.scss index b713d08..a484b8e 100644 --- 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; + } + } } } } \ No newline at end of file