._.

WEB/app/src/app/app.css

@@ -110,8 +110,8 @@
 
 .calendar {
     margin: 2vw;
-    border: 1px solid black;
     height: 25vw;
+    padding: 2vw;
 }
 
 .events {
@@ -131,3 +131,56 @@
     flex-direction: row;
     justify-content: space-between;
 }
+
+.calendar-container {
+    width: 350px;
+    text-align: center;
+    font-family: Arial, sans-serif;
+}
+
+.calendar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #2f9836;
+    color: white;
+    padding: 10px;
+    border-radius: 8px;
+}
+
+.calendar-header button {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 20px;
+    cursor: pointer;
+}
+
+.calendar-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 5px;
+    margin-top: 10px;
+}
+
+.calendar-weekday {
+    font-weight: bold;
+    text-align: center;
+}
+
+.calendar-day, .empty-cell {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+}
+
+.calendar-day {
+    cursor: pointer;
+}
+
+.calendar-day:hover {
+    background-color: #cfcfcf;
+}

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

@@ -0,0 +1,48 @@
+'use client';
+
+import {useState} from "react";
+
+const Calendar = () => {
+    const [currentDate, setCurrentDate] = useState(new Date());
+
+    const year = currentDate.getFullYear();
+    const month = currentDate.getMonth();
+
+    const prevMonth = () => setCurrentDate(new Date(year, month - 1, 1));
+    const nextMonth = () => setCurrentDate(new Date(year, month + 1, 1));
+
+    const generateCalendar = () => {
+        const firstDayOfMonth = new Date(year, month, 1).getDay(); // День недели 1-го числа (0 - воскресенье)
+        const daysInMonth = new Date(year, month + 1, 0).getDate(); // Количество дней в месяце
+
+        const startOffset = firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1;
+
+        const daysArray = Array.from({length: daysInMonth}, (_, i) => i + 1);
+        return [...Array(startOffset).fill(null), ...daysArray];
+    };
+
+    const days = generateCalendar();
+    const weekDays = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"];
+
+    return (
+        <div className="calendar-container">
+            <div className="calendar-header">
+                <button onClick={prevMonth}>{"<"}</button>
+                <h2>{currentDate.toLocaleString("ru-RU", {month: "long", year: "numeric"})}</h2>
+                <button onClick={nextMonth}>{">"}</button>
+            </div>
+
+            <div className="calendar-grid">
+                {weekDays.map((day) => (
+                    <div key={day} className="calendar-weekday">{day}</div>
+                ))}
+                {days.map((day, index) =>
+                    day ? <div key={index} className="calendar-day">{day}</div> :
+                        <div key={index} className="empty-cell"></div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default Calendar;

WEB/app/src/app/page.js

@@ -6,6 +6,7 @@ import EmployeeCard from './components/employee-card.js';
 import {useEffect, useState} from 'react';
 import RSSFeed from './components/news-card.js';
 import EventCard from './components/event-card';
+import Calendar from "./components/сalendar";
 
 export default function Home() {
     const [searchString, setSearchString] = useState('');
@@ -129,6 +130,8 @@ export default function Home() {
                             <h1>
                                 Календарь
                             </h1>
+
+                            <Calendar/>
                         </div>
 
                         <div className="events">