111 lines
2.7 KiB
JavaScript
111 lines
2.7 KiB
JavaScript
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import style from './CalendarComponent.module.css';
|
|||
|
|
import ellipse from '../../images/ellipse.png';
|
|||
|
|
import rectangle from '../../images/rectangle__calendar.png';
|
|||
|
|
import moment from 'moment';
|
|||
|
|
import calendarHelper from './calendarHelper';
|
|||
|
|
import 'moment/locale/ru';
|
|||
|
|
|
|||
|
|
const CalendarComponent = () => {
|
|||
|
|
const [value, setValue] = useState(moment());
|
|||
|
|
const [calendar, setCalendar] = useState([]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
setCalendar(calendarHelper(value));
|
|||
|
|
}, [value]);
|
|||
|
|
|
|||
|
|
function isSelected(day) {
|
|||
|
|
return value.isSame(day, 'day');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// function beforeToday(day) {
|
|||
|
|
// return day.isBefore(new Date(), 'day');
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// function isToday(day) {
|
|||
|
|
// return day.isSame(new Date(), 'day');
|
|||
|
|
// }
|
|||
|
|
// const month = [
|
|||
|
|
// 'January',
|
|||
|
|
// 'February',
|
|||
|
|
// 'March',
|
|||
|
|
// 'April',
|
|||
|
|
// 'May',
|
|||
|
|
// 'June',
|
|||
|
|
// 'July',
|
|||
|
|
// 'August',
|
|||
|
|
// 'September',
|
|||
|
|
// 'October',
|
|||
|
|
// 'November',
|
|||
|
|
// 'December',
|
|||
|
|
// ];
|
|||
|
|
|
|||
|
|
function currentMonth(day) {
|
|||
|
|
return day.format('MMMM');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function currentDay(day) {
|
|||
|
|
return day.format('D');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function prevMonth() {
|
|||
|
|
return value.clone().subtract(1, 'month');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function nextMonth() {
|
|||
|
|
return value.clone().add(1, 'month');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function thisMonth() {
|
|||
|
|
return value.isSame(new Date(), 'month');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log(thisMonth());
|
|||
|
|
|
|||
|
|
//////////////////////////////////////////////////////////////////////////
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className={style.CalendarComponent}>
|
|||
|
|
<div className={style.CalendarComponent__header}>
|
|||
|
|
<h3>Мои отчеты</h3>
|
|||
|
|
<div className={style.CalendarComponent__header__box}>
|
|||
|
|
<img src={ellipse} alt="" />
|
|||
|
|
<span onClick={() => setValue(prevMonth())}>Май</span>
|
|||
|
|
</div>
|
|||
|
|
<div className={style.CalendarComponent__header__box}>
|
|||
|
|
<img src={ellipse} alt="" />
|
|||
|
|
<span onClick={() => setValue(nextMonth())}>Апрель</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className={style.CalendarComponent__rectangle}>
|
|||
|
|
<img src={rectangle} alt="" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className={style.CalendarComponent__body}>
|
|||
|
|
<div>
|
|||
|
|
<p>ПН</p>
|
|||
|
|
<p>ВТ</p>
|
|||
|
|
<p>СР</p>
|
|||
|
|
<p>ЧТ</p>
|
|||
|
|
<p>ПТ</p>
|
|||
|
|
<p>СБ</p>
|
|||
|
|
<p>ВС</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className={style.CalendarComponent__form}>
|
|||
|
|
{calendar.map((week) =>
|
|||
|
|
week.map((day) => (
|
|||
|
|
<button onClick={() => setValue(day)} key={day} className={`${isSelected(day) ? style.selected : ''}`}>
|
|||
|
|
{currentDay(day)} {currentMonth(day)}
|
|||
|
|
</button>
|
|||
|
|
))
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default CalendarComponent;
|