add calendar
This commit is contained in:
parent
6de87cae14
commit
6cfbcd2258
5
package-lock.json
generated
5
package-lock.json
generated
@ -10298,6 +10298,11 @@
|
||||
"minimist": "^1.2.5"
|
||||
}
|
||||
},
|
||||
"moment": {
|
||||
"version": "2.29.1",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
|
||||
"integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
|
||||
},
|
||||
"move-concurrently": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
|
||||
|
@ -9,6 +9,7 @@
|
||||
"@testing-library/user-event": "^12.8.3",
|
||||
"bootstrap": "^4.6.0",
|
||||
"eslint": "^7.27.0",
|
||||
"moment": "^2.29.1",
|
||||
"react": "^17.0.2",
|
||||
"react-bootstrap": "^1.6.0",
|
||||
"react-dom": "^17.0.2",
|
||||
|
@ -1,6 +1,8 @@
|
||||
import React from 'react';
|
||||
import style from './Calendar.module.css';
|
||||
import calendarMale from '../../images/medium_male.png';
|
||||
import rectangle from '../../images/rectangle_secondPage.png';
|
||||
import CalendarComponent from './CalendarComponent';
|
||||
|
||||
const Calendar = () => {
|
||||
return (
|
||||
@ -8,15 +10,31 @@ const Calendar = () => {
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<h2 className={style.calendar__title}>
|
||||
Добрый день, <span>Александр!</span>
|
||||
Добрый день, <span>Александр !</span>
|
||||
</h2>
|
||||
<div className="col-xl-12">
|
||||
<div className="col-xl-12 d-flex justify-content-between align-items-center">
|
||||
<div className={style.calendarHeader__info}>
|
||||
<img className={style.calendarHeader__info__img} src={calendarMale} alt="img" />
|
||||
<h3 className={style.calendarHeader__info__name}>header</h3>
|
||||
<h3 className={style.calendarHeader__info__name}>
|
||||
Александр <br /> Комов
|
||||
</h3>
|
||||
</div>
|
||||
<div className={style.calendarHeader__title}></div>
|
||||
<div className={style.calendarHeader__btn}></div>
|
||||
<div className={style.calendarHeader__title}>
|
||||
<h3 className={style.calendarHeader__title__text}>Frontend разработчик, Middle</h3>
|
||||
<img className={style.calendarHeader__title__img} src={rectangle} alt="img" />
|
||||
</div>
|
||||
<div className={style.calendarHeader__btn}>
|
||||
<button>Заполнить отчет за день</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<CalendarComponent />
|
||||
<p className={style.calendarFooter__text}>
|
||||
Июнь : <span> 60 часов </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,4 +1,101 @@
|
||||
.calendar__title {
|
||||
font-size: 32px;
|
||||
color: violet;
|
||||
color: #282828;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 3.4em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 48.74px;
|
||||
text-align: left;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.calendar__title > span {
|
||||
color: #52b709;
|
||||
font-style: normal;
|
||||
letter-spacing: 0.56px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.calendarHeader__info {
|
||||
background-color: #f9f9f9;
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 24%;
|
||||
height: 112px;
|
||||
}
|
||||
|
||||
.calendarHeader__info__img {
|
||||
position: absolute;
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
left: -40px;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.calendarHeader__info__name {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 68%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.calendarHeader__title__text {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.7em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.calendarHeader__btn > button {
|
||||
width: 280px;
|
||||
height: 62px;
|
||||
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
|
||||
border-radius: 31px;
|
||||
background-color: #ffffff;
|
||||
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
|
||||
linear-gradient(
|
||||
36deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.16) 47%,
|
||||
rgba(255, 255, 255, 0.17) 50%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-family: 'Muller';
|
||||
font-size: 1.6em;
|
||||
letter-spacing: normal;
|
||||
line-height: 71.88px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendarFooter__text {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.2em;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
margin-left: 68px;
|
||||
}
|
||||
|
||||
.calendarFooter__text > span {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
}
|
||||
|
110
src/components/Calendar/CalendarComponent.js
Normal file
110
src/components/Calendar/CalendarComponent.js
Normal file
@ -0,0 +1,110 @@
|
||||
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;
|
92
src/components/Calendar/CalendarComponent.module.css
Normal file
92
src/components/Calendar/CalendarComponent.module.css
Normal file
@ -0,0 +1,92 @@
|
||||
.CalendarComponent {
|
||||
margin-top: 80px;
|
||||
margin-bottom: 60px;
|
||||
background-color: #f9f9f9;
|
||||
padding-left: 68px;
|
||||
padding-right: 54px;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 94px;
|
||||
}
|
||||
|
||||
.CalendarComponent__header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.CalendarComponent__header > h3 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 25px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.CalendarComponent__header__box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.CalendarComponent__header__box > img {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.CalendarComponent__header__box > span {
|
||||
color: #18586e;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.6em;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 16.81px;
|
||||
text-align: left;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.CalendarComponent__rectangle {
|
||||
margin: 36px 0;
|
||||
}
|
||||
|
||||
.CalendarComponent__rectangle > img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.CalendarComponent__body > div {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.CalendarComponent__body > div > p {
|
||||
color: #398208;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 25px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.CalendarComponent__form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.CalendarComponent__form > button {
|
||||
width: 125px;
|
||||
height: 42px;
|
||||
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
|
||||
border-radius: 5px;
|
||||
border: 1px solid #c4c4c4;
|
||||
background-color: #ffffff;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.selected {
|
||||
font-weight: bold;
|
||||
border: 1px solid #398208 !important;
|
||||
}
|
20
src/components/Calendar/calendarHelper.js
Normal file
20
src/components/Calendar/calendarHelper.js
Normal file
@ -0,0 +1,20 @@
|
||||
export default function calendarHelper(value) {
|
||||
const startDay = value.clone().startOf('month').startOf('week').startOf('day');
|
||||
const endDay = value.clone().endOf('month').endOf('week');
|
||||
|
||||
const day = startDay.clone().subtract(1, 'day');
|
||||
|
||||
const calendar = [];
|
||||
|
||||
console.log('calendar', calendar);
|
||||
|
||||
while (day.isBefore(endDay, 'day')) {
|
||||
calendar.push(
|
||||
Array(7)
|
||||
.fill(0)
|
||||
.map(() => day.add(1, 'day').clone())
|
||||
);
|
||||
}
|
||||
|
||||
return calendar;
|
||||
}
|
BIN
src/images/rectangle__calendar.png
Normal file
BIN
src/images/rectangle__calendar.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 128 B |
Loading…
Reference in New Issue
Block a user