finished calendar

src/App.js

@@ -3,7 +3,7 @@ import { HashRouter as Router, Route, Switch } from 'react-router-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './fonts/stylesheet.css';
 
-// const AuthPageForDevelopers = lazy(() => import('./pages/AuthPageForDevelopers'));
+const AuthPageForDevelopers = lazy(() => import('./pages/AuthPageForDevelopers'));
 // const AuthPageForPartners = lazy(() => import('./pages/AuthPageForPartners'));
 const HomePage = lazy(() => import('./pages/HomePage'));
 const CandidatePage = lazy(() => import('./pages/CandidatePage'));
@@ -23,14 +23,16 @@ const App = () => {
             <Route path="/candidate/:id">
               <CandidatePage />
             </Route>
+            <Route path="/calendar">
+              <CalendarPage />
+            </Route>
             <Route>
               <div>Not found page</div>
             </Route>
           </Switch>
         ) : (
           <Route path="/" exact>
-            <CalendarPage />
-            {/* <AuthPageForDevelopers setAuth={setIsAuth} /> */}
+            <AuthPageForDevelopers setAuth={setIsAuth} />
             {/* <AuthPageForPartners setAuth={setIsAuth} /> */}
           </Route>
         )}

src/components/Auth/AuthForDevelopers.js

@@ -4,7 +4,6 @@ import ellipse from '../../images/ellipse.png';
 import arrow from '../../images/arrow__login_page.png';
 import authImg from '../../images/auth_img.png';
 import cross from '../../images/cross.png';
-// import specialists from '../../images/specialists.png';
 import text from '../../images/Body_Text.png';
 import align from '../../images/align-left.png';
 import phone from '../../images/phone.png';

src/components/Calendar/CalendarComponent.js

@@ -2,9 +2,10 @@ 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 calendarIcon from '../../images/calendar_icon.png';
 import moment from 'moment';
-import calendarHelper from './calendarHelper';
 import 'moment/locale/ru';
+import calendarHelper from './calendarHelper';
 
 const CalendarComponent = () => {
   const [value, setValue] = useState(moment());
@@ -14,38 +15,23 @@ const CalendarComponent = () => {
     setCalendar(calendarHelper(value));
   }, [value]);
 
-  function isSelected(day) {
-    return value.isSame(day, 'day');
+  function beforeToday(day) {
+    return day.isBefore(new Date(), 'day');
   }
 
-  // function beforeToday(day) {
-  //   return day.isBefore(new Date(), 'day');
-  // }
+  function isToday(day) {
+    return day.isSame(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 dayStyles(day) {
+    if (beforeToday(day)) return `${style.before}`;
+    if (isToday(day)) return `${style.today}`;
+    if (day.day() === 6 || day.day() === 0) return `${style.selected}`;
+    return '';
+  }
 
   function currentMonth(day) {
-    return day.format('MMMM');
-  }
-
-  function currentDay(day) {
-    return day.format('D');
+    return day.format('D MMMM');
   }
 
   function prevMonth() {
@@ -56,12 +42,6 @@ const CalendarComponent = () => {
     return value.clone().add(1, 'month');
   }
 
-  function thisMonth() {
-    return value.isSame(new Date(), 'month');
-  }
-
-  console.log(thisMonth());
-
   //////////////////////////////////////////////////////////////////////////
 
   return (
@@ -96,8 +76,15 @@ const CalendarComponent = () => {
         <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
+                onClick={() => setValue(day)}
+                key={day}
+                className={dayStyles(day)}
+                name={day.format('dddd')}
+                id="btn"
+              >
+                <img className={style.calendarIcon} src={calendarIcon} alt="" />
+                {currentMonth(day)}
               </button>
             ))
           )}

src/components/Calendar/CalendarComponent.module.css

@@ -84,9 +84,29 @@
   border: 1px solid #c4c4c4;
   background-color: #ffffff;
   margin-top: 20px;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.2em;
+  font-weight: 100;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: normal;
+  text-align: center;
+}
+
+.calendarIcon {
+  margin-right: 10px;
+  margin-top: -4px;
+}
+
+.before {
+  opacity: 0.2;
+}
+
+.today {
+  font-weight: bold !important;
+  border: 1px solid #398208 !important;
 }
 
 .selected {
-  font-weight: bold;
-  border: 1px solid #398208 !important;
+  background-color: yellow !important;
 }

src/components/Calendar/calendarHelper.js

@@ -6,11 +6,9 @@ export default function calendarHelper(value) {
 
   const calendar = [];
 
-  console.log('calendar', calendar);
-
   while (day.isBefore(endDay, 'day')) {
     calendar.push(
-      Array(7)
+      Array(1)
         .fill(0)
         .map(() => day.add(1, 'day').clone())
     );

src/components/Sidebar/Sidebar.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import dogBig from '../../images/dog.jpg';
 import arrowLeft from '../../images/arrow_left.png';
 import arrowRight from '../../images/arrow_right.png';
@@ -11,7 +12,9 @@ const Sidebar = () => {
         <img src={dogBig} alt="" />
         <p className={style.candidateSidebar__info__e}>Опыт работы</p>
         <p className={style.candidateSidebar__info__y}>4+ лет</p>
-        <button className={style.candidateSidebar__info__btn}>Выбрать к собеседованию</button>
+        <Link to={`/calendar`}>
+          <button className={style.candidateSidebar__info__btn}>Выбрать к собеседованию</button>
+        </Link>
         <p className={style.candidateSidebar__info__l}>Посмотреть ещё</p>
       </div>