import React, { useState,useEffect } from 'react'; import "react-datepicker/dist/react-datepicker.css"; import NavigationDashboard from '../components/NavigationDashboard'; import axios from 'axios'; import Session from 'react-session-api'; import Select, { SelectChangeEvent } from '@mui/material/Select'; import MenuItem from '@mui/material/MenuItem'; import format from "date-fns/format"; import getDay from "date-fns/getDay"; import parse from "date-fns/parse"; import startOfWeek from "date-fns/startOfWeek"; import { Calendar, dateFnsLocalizer } from "react-big-calendar"; import "react-big-calendar/lib/css/react-big-calendar.css"; const api = axios.create({ baseURL: 'http://localhost:8080' }) const locales = { 'fr': require('date-fns/locale/fr') }; const localizer = dateFnsLocalizer({ format, parse, startOfWeek, getDay, locales, }); function Calendrier(){ const [contacts, setContacts] = useState([]); const [selectedContact, setSelectedContact] = useState(1); const [allEvents, setAllEvents] = useState([]); useEffect(() =>{ const apiString = '/Contact/' + Session.get("idUser"); api.get(apiString).then((response) => { setContacts(response.data); setSelectedContact(response.data[0].idcontact) }); const apiStringEvent = '/Event/' + Session.get("idUser"); api.get(apiStringEvent).then((response) => { setAllEvents([]); response.data.forEach(event => { const newEvent = { title: event.comment, start: new Date(event.date+" "+event.starttime), end: new Date(event.date+" "+event.endtime) }; setAllEvents(allEvents => [...allEvents, newEvent]); }); }); }, []); const [theme, setTheme] = useState("light"); if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) { setTheme(localStorage.getItem("theme")) } const [titre, setTitre] = useState(""); const [jour , setJour] = useState(new Date()); const [heureDebut, setHeureDebut] = useState(new Date()); const [heureFin, setHeureFin] = useState(new Date()); function handleAddEvent() { const newEvent = { title: titre, start: new Date(jour+" "+heureDebut), end: new Date(jour+" "+heureFin) }; const newEventBD = { date: jour,starttime: heureDebut,endtime: heureFin,comment: titre, idusersend: Session.get("idUser"),iduserreceive: Session.get("idUser"), idcontact: selectedContact}; api.post('/Event/Add', newEventBD).then (function(response) { console.log(response.data); }); setAllEvents([...allEvents, newEvent]); } function handleChangeContact(event){ setSelectedContact(event.target.value); }; return (

{/*Create a calendar page*/}

Calendrier

Ajouter un évènement
setTitre(e.target.value)} /> setJour(e.target.value)} /> setHeureDebut(e.target.value)} /> setHeureFin(e.target.value)} />

); }; export default Calendrier;