add calendar

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;