._.

WEB/app/src/app/components/сalendar.js

@@ -5,6 +5,7 @@ import {useEffect, useState} from "react";
 const Calendar = () => {
     const [currentDate, setCurrentDate] = useState(new Date());
     const [birthdays, setBirthdays] = useState([]);
+    const [events, setEvents] = useState([]);
     const today = new Date();
 
     const year = currentDate.getFullYear();
@@ -12,6 +13,7 @@ const Calendar = () => {
 
     useEffect(() => {
         fetchBirthdays();
+        fetchEvents();
     }, [year, month]);
 
     const fetchBirthdays = async () => {
@@ -26,6 +28,24 @@ const Calendar = () => {
         }
     };
 
+    const fetchEvents = async () => {
+        try {
+            const response = await fetch("http://localhost:5000/events");
+            if (response.ok) {
+                const data = await response.json();
+                setEvents(data);
+            }
+        } catch (error) {
+            console.error("Ошибка загрузки событий:", error);
+        }
+    };
+
+    const getEventColor = (eventCount) => {
+        if (eventCount >= 5) return "#FC4343";
+        if (eventCount < 2) return "#89FC43";
+        return "#F8FC43";
+    };
+
     const getBirthdaysForDay = (day) => {
         return birthdays.filter((user) => {
             const birthday = new Date(user.birthday);
@@ -33,6 +53,13 @@ const Calendar = () => {
         });
     };
 
+    const getEventsForDay = (day) => {
+        return events.filter(event => {
+            const eventDate = new Date(event.date);
+            return eventDate.getDate() === day && eventDate.getMonth() === month;
+        });
+    };
+
     const prevMonth = () => setCurrentDate(new Date(year, month - 1, 1));
     const nextMonth = () => setCurrentDate(new Date(year, month + 1, 1));
 
@@ -60,8 +87,14 @@ const Calendar = () => {
                 {weekDays.map((day) => (
                     <div key={day} className="calendar-weekday">{day}</div>
                 ))}
-                {days.map((day, index) =>
+                {days.map((day, index) => {
-                    day ? (
+                    if (!day) return <div key={index} className="empty-cell"></div>;
+
+                    const dayEvents = getEventsForDay(day);
+                    const eventCount = dayEvents.length;
+                    const backgroundColor = eventCount > 0 ? getEventColor(eventCount) : "transparent";
+
+                    return (
                         <div
                             key={index}
                             className={`calendar-day ${
@@ -71,11 +104,12 @@ const Calendar = () => {
                                     ? "current-day"
                                     : ""
                             }`}
+                            style={{backgroundColor}}
                         >
                             {day}
                             {getBirthdaysForDay(day).length > 0 && (
                                 <div className="birthday-icon">
-                                    <img src={"/img.png"} alt={""} width="25x"/>
+                                    <img src={"/img.png"} alt="🎂" width="25px"/>
                                     <div className="tooltip">
                                         {getBirthdaysForDay(day).map(user => (
                                             <div key={user.id}>{user.last_name} {user.first_name}</div>
@@ -84,10 +118,8 @@ const Calendar = () => {
                                 </div>
                             )}
                         </div>
-                    ) : (
+                    );
-                        <div key={index} className="empty-cell"></div>
+                })}
-                    )
-                )}
             </div>
         </div>
     );