Calendary with days

Naetffy · May 21, 2024 · 9bae816 · 9bae816
1 parent 87afbef
commit 9bae816
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 27 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/src/pages/Calendar/Calendar.css b/src/pages/Calendar/Calendar.css
@@ -10,14 +10,12 @@
     border-radius: 8px;     
 }
 
-
 .react-calendar__navigation button {
     background-color: transparent; 
     color: #333; 
     font-size: 1rem; 
 }
 
-
 .react-calendar__month-view__days {
     margin-top: 0.5rem;
 }
@@ -26,26 +24,33 @@
     background-color: #A4826D !important;
 }
 
-
+.highlight {
+    background-color: #E1E6F0 !important;
+    border-radius: 50%;
+}
 
 .react-calendar__tile--active {
     background-color: #007bff;
-    color: #fff; 
+    color: #fff;
 }
 
-
 .react-calendar__tile--active:enabled:focus,
 .react-calendar__tile--active:enabled:hover,
 .react-calendar__tile--active:enabled:active {
-    background-color: #86654b; 
+    background-color: #86654b;
 }
 
-
 .react-calendar__tile--now {
     background-color: #A4826D;
-    color: #333; 
+    color: #333;
 }
 
+.highlight-today {
+    background-color: #FFE4B5 !important;
+    border-radius: 50%;
+}
+
+
 
 
 
diff --git a/src/pages/Calendar/Calendar.js b/src/pages/Calendar/Calendar.js
@@ -1,38 +1,64 @@
-import React, { useState } from 'react';
-import { Link } from 'react-router-dom'; 
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 import NavBar from '../../components/Navbar/NavBar';
 import Calendar from 'react-calendar';
-import 'react-calendar/dist/Calendar.css'; 
+import 'react-calendar/dist/Calendar.css';
 import './Calendar.css';
 import OutfitOfDay from '../../components/OutfitOfDay/OutfitOfDay';
+import apiClient from '../../services/apiClient';
 
 const CalendarPage = () => {
     const [date, setDate] = useState(new Date());
+    const [outfitDates, setOutfitDates] = useState([]);
 
     const onChange = (date) => {
         setDate(date);
     };
 
+    useEffect(() => {
+        const fetchOutfitDates = async () => {
+            try {
+                const response = await apiClient.get('/outfit/dates'); // Cambia la ruta según tu API
+                setOutfitDates(response.data);
+            } catch (error) {
+                console.error('Error fetching outfit dates:', error);
+            }
+        };
+
+        fetchOutfitDates();
+    }, []);
+
+    const tileClassName = ({ date, view }) => {
+        if (view === 'month') {
+            const dateString = date.toISOString().split('T')[0];
+            if (outfitDates.includes(dateString)) {
+                return 'highlight';
+            }
+        }
+        return null;
+    };
+
     return (
         <div className='col-12'>
-            <NavBar/>
-            <div className="row "> 
+            <NavBar />
+            <div className="row calendar-container">
                 <div className="col-10 offset-1 col-sm-10 col-md-4 offset-md-0 col-lg-4 offset-lg-0">
                     <h2 className="text-center">Calendar</h2>
-                    <div className="d-flex justify-content-center"> 
+                    <div className="d-flex justify-content-center">
                         <Calendar
                             onChange={onChange}
                             value={date}
                             locale="en-US"
+                            tileClassName={tileClassName}
                         />
                     </div>
-                    <div className="d-flex justify-content-center mt-3"> 
+                    <div className="d-flex justify-content-center mt-3">
                         <Link to="/">
-                        <button className="btn btn-primary custom-btn">Create Outfit</button> 
+                            <button className="btn btn-primary custom-btn">Create Outfit</button>
                         </Link>
                     </div>
                 </div>
-                <div className="col-10 offset-1 col-sm-10 col-md-7 offset-md-0 col-lg-7 offset-lg-0">                  
+                <div className="col-10 offset-1 col-sm-10 col-md-7 offset-md-0 col-lg-7 offset-lg-0">
                     <OutfitOfDay selectedDate={date} />
                 </div>
             </div>
@@ -41,3 +67,4 @@ const CalendarPage = () => {
 }
 
 export default CalendarPage;
+