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"
|
"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": {
|
"move-concurrently": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
|
||||||
|
@ -9,6 +9,7 @@
|
|||||||
"@testing-library/user-event": "^12.8.3",
|
"@testing-library/user-event": "^12.8.3",
|
||||||
"bootstrap": "^4.6.0",
|
"bootstrap": "^4.6.0",
|
||||||
"eslint": "^7.27.0",
|
"eslint": "^7.27.0",
|
||||||
|
"moment": "^2.29.1",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-bootstrap": "^1.6.0",
|
"react-bootstrap": "^1.6.0",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import style from './Calendar.module.css';
|
import style from './Calendar.module.css';
|
||||||
import calendarMale from '../../images/medium_male.png';
|
import calendarMale from '../../images/medium_male.png';
|
||||||
|
import rectangle from '../../images/rectangle_secondPage.png';
|
||||||
|
import CalendarComponent from './CalendarComponent';
|
||||||
|
|
||||||
const Calendar = () => {
|
const Calendar = () => {
|
||||||
return (
|
return (
|
||||||
@ -10,13 +12,29 @@ const Calendar = () => {
|
|||||||
<h2 className={style.calendar__title}>
|
<h2 className={style.calendar__title}>
|
||||||
Добрый день, <span>Александр !</span>
|
Добрый день, <span>Александр !</span>
|
||||||
</h2>
|
</h2>
|
||||||
<div className="col-xl-12">
|
<div className="col-xl-12 d-flex justify-content-between align-items-center">
|
||||||
<div className={style.calendarHeader__info}>
|
<div className={style.calendarHeader__info}>
|
||||||
<img className={style.calendarHeader__info__img} src={calendarMale} alt="img" />
|
<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>
|
||||||
<div className={style.calendarHeader__title}></div>
|
<div className={style.calendarHeader__title}>
|
||||||
<div className={style.calendarHeader__btn}></div>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,4 +1,101 @@
|
|||||||
.calendar__title {
|
.calendar__title {
|
||||||
font-size: 32px;
|
color: #282828;
|
||||||
color: violet;
|
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