._.
This commit is contained in:
parent
9b67ebf431
commit
cd978c05b3
@ -184,3 +184,9 @@
|
||||
.calendar-day:hover {
|
||||
background-color: #cfcfcf;
|
||||
}
|
||||
.current-day {
|
||||
border: 1px solid #2f9836;
|
||||
border-radius: 50%;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user