102 lines
2.6 KiB
React
102 lines
2.6 KiB
React
|
import React, { useState, useEffect } from "react";
|
|||
|
|
import { calendarHelper, currentMonthAndDay } from "./calendarHelper";
|
|||
|
|
|
|||
|
|
import ellipse from "../../images/ellipse.png";
|
|||
|
|
import rectangle from "../../images/rectangle__calendar.png";
|
|||
|
|
import calendarIcon from "../../images/calendar_icon.png";
|
|||
|
|
|
|||
|
|
import moment from "moment";
|
|||
|
|
import "moment/locale/ru";
|
|||
|
|
|
|||
|
|
import "./calendarComponent.scss";
|
|||
|
|
|
|||
|
|
const CalendarComponent = ({ onSelect }) => {
|
|||
|
|
const [value, setValue] = useState(moment());
|
|||
|
|
const [calendar, setCalendar] = useState([]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
setCalendar(calendarHelper(value));
|
|||
|
|
}, [value]);
|
|||
|
|
|
|||
|
|
function beforeToday(day) {
|
|||
|
|
return day.isBefore(new Date(), "day");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isToday(day) {
|
|||
|
|
return day.isSame(new Date(), "day");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function dayStyles(day) {
|
|||
|
|
if (beforeToday(day)) return `before`;
|
|||
|
|
if (isToday(day)) return `today`;
|
|||
|
|
if (day.day() === 6 || day.day() === 0) return `selected`;
|
|||
|
|
return "";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function prevMonth() {
|
|||
|
|
return value.clone().subtract(1, "month");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function nextMonth() {
|
|||
|
|
return value.clone().add(1, "month");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="calendar-component">
|
|||
|
|
<div className="calendar-component__header">
|
|||
|
|
<h3>Мои отчеты</h3>
|
|||
|
|
<div className="calendar-component__header-box">
|
|||
|
|
<img src={ellipse} alt="" />
|
|||
|
|
<span onClick={() => setValue(prevMonth())}>
|
|||
|
|
{prevMonth().format("MMMM")}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="calendar-component__header-box">
|
|||
|
|
<img src={ellipse} alt="" />
|
|||
|
|
<span onClick={() => setValue(nextMonth())}>
|
|||
|
|
{nextMonth().format("MMMM")}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="calendar-component__rectangle">
|
|||
|
|
<img src={rectangle} alt="" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="calendar-component__body">
|
|||
|
|
<div>
|
|||
|
|
<p>Пн</p>
|
|||
|
|
<p>Вт</p>
|
|||
|
|
<p>Ср</p>
|
|||
|
|
<p>Чт</p>
|
|||
|
|
<p>Пт</p>
|
|||
|
|
<p>Сб</p>
|
|||
|
|
<p>Вс</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="calendar-component__form">
|
|||
|
|
{calendar.map((week) =>
|
|||
|
|
week.map((day) => (
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setValue(day);
|
|||
|
|
onSelect(day);
|
|||
|
|
}}
|
|||
|
|
key={day}
|
|||
|
|
className={dayStyles(day)}
|
|||
|
|
name={day.format("dddd")}
|
|||
|
|
id="btn"
|
|||
|
|
>
|
|||
|
|
<img className={"calendar__icon"} src={calendarIcon} alt="" />
|
|||
|
|
{currentMonthAndDay(day)}
|
|||
|
|
</button>
|
|||
|
|
))
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default CalendarComponent;
|