diff --git a/package-lock.json b/package-lock.json index 0584eae4..fef38906 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 0aedbaa8..0c57fda0 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/Calendar/Calendar.js b/src/components/Calendar/Calendar.js index 1d9de06b..a2a6276a 100644 --- a/src/components/Calendar/Calendar.js +++ b/src/components/Calendar/Calendar.js @@ -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 = () => {

- Добрый день, Александр! + Добрый день, Александр !

-
+
img -

header

+

+ Александр
Комов +

-
-
+
+

Frontend разработчик, Middle

+ img +
+
+ +
+
+
+ +
+
+ +

+ Июнь : 60 часов +

diff --git a/src/components/Calendar/Calendar.module.css b/src/components/Calendar/Calendar.module.css index d514e503..b85d21d7 100644 --- a/src/components/Calendar/Calendar.module.css +++ b/src/components/Calendar/Calendar.module.css @@ -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; } diff --git a/src/components/Calendar/CalendarComponent.js b/src/components/Calendar/CalendarComponent.js new file mode 100644 index 00000000..ea65d785 --- /dev/null +++ b/src/components/Calendar/CalendarComponent.js @@ -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 ( +
+
+

Мои отчеты

+
+ + setValue(prevMonth())}>Май +
+
+ + setValue(nextMonth())}>Апрель +
+
+ +
+ +
+ +
+
+

ПН

+

ВТ

+

СР

+

ЧТ

+

ПТ

+

СБ

+

ВС

+
+ +
+ {calendar.map((week) => + week.map((day) => ( + + )) + )} +
+
+
+ ); +}; + +export default CalendarComponent; diff --git a/src/components/Calendar/CalendarComponent.module.css b/src/components/Calendar/CalendarComponent.module.css new file mode 100644 index 00000000..fab52808 --- /dev/null +++ b/src/components/Calendar/CalendarComponent.module.css @@ -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; +} diff --git a/src/components/Calendar/calendarHelper.js b/src/components/Calendar/calendarHelper.js new file mode 100644 index 00000000..1499edb5 --- /dev/null +++ b/src/components/Calendar/calendarHelper.js @@ -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; +} diff --git a/src/images/rectangle__calendar.png b/src/images/rectangle__calendar.png new file mode 100644 index 00000000..89be318d Binary files /dev/null and b/src/images/rectangle__calendar.png differ