add calendar

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",

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",

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 (
@@ -10,13 +12,29 @@ const Calendar = () => {
           <h2 className={style.calendar__title}>
             Добрый день, <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>

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;
 }

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 (
+    <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;

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;
+}

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;
+}