This commit is contained in:
Андрей Дувакин 2025-01-28 18:57:30 +05:00
parent 9b67ebf431
commit cd978c05b3
2 changed files with 25 additions and 5 deletions

View File

@ -184,3 +184,9 @@
.calendar-day:hover {
background-color: #cfcfcf;
}
.current-day {
border: 1px solid #2f9836;
border-radius: 50%;
font-weight: bold;
color: black;
}

View File

@ -1,9 +1,10 @@
'use client';
import {useState} from "react";
import { useState } from "react";
const Calendar = () => {
const [currentDate, setCurrentDate] = useState(new Date());
const today = new Date(); // Текущая дата (для сравнения)
const year = currentDate.getFullYear();
const month = currentDate.getMonth();
@ -16,8 +17,7 @@ const Calendar = () => {
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);
const daysArray = Array.from({ length: daysInMonth }, (_, i) => i + 1);
return [...Array(startOffset).fill(null), ...daysArray];
};
@ -28,7 +28,7 @@ const Calendar = () => {
<div className="calendar-container">
<div className="calendar-header">
<button onClick={prevMonth}>{"<"}</button>
<h2>{currentDate.toLocaleString("ru-RU", {month: "long", year: "numeric"})}</h2>
<h2>{currentDate.toLocaleString("ru-RU", { month: "long", year: "numeric" })}</h2>
<button onClick={nextMonth}>{">"}</button>
</div>
@ -37,8 +37,22 @@ const Calendar = () => {
<div key={day} className="calendar-weekday">{day}</div>
))}
{days.map((day, index) =>
day ? <div key={index} className="calendar-day">{day}</div> :
day ? (
<div
key={index}
className={`calendar-day ${
today.getFullYear() === year &&
today.getMonth() === month &&
today.getDate() === day
? "current-day"
: ""
}`}
>
{day}
</div>
) : (
<div key={index} className="empty-cell"></div>
)
)}
</div>
</div>