update homeCalendar

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import moment from "moment";
 
 const HomeCalendarWrapper = styled.div`
   display: flex;
@@ -10,6 +11,9 @@ const HomeCalendarWrapper = styled.div`
   align-items: center;
   height: 50%;
   width: 100%;
+  background-color: white;
+  opacity: 0.8;
+  border-radius: 10px;
 `;
 
 const CalenderBox = styled.div`
@@ -19,7 +23,6 @@ const CalenderBox = styled.div`
   align-items: center;
   height: 100%;
   width: 100%;
-  border: 1px solid;
 `;
 
 const CalenderMenuBox = styled.div`
@@ -29,7 +32,6 @@ const CalenderMenuBox = styled.div`
   align-items: center;
   height: 15%;
   width: 100%;
-  border: 1px solid;
 `;
 
 const DateInfoSpan = styled.span`
@@ -48,12 +50,15 @@ const DateBodyBox = styled.div`
 
 const DateRow = styled.div`
   width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
+  align-items: center;
 `;
 
 const DateText = styled.span`
+  text-align: center;
   font-family: "Overpass", sans-serif;
   color: ${(props) => {
     if (props.className === "Sunday") return "#EA2027";
@@ -62,6 +67,37 @@ const DateText = styled.span`
 `;
 
 export default () => {
+  const generate = () => {
+    const today = moment();
+    const startWeek = today.clone().startOf("month").week();
+    const endWeek =
+      today.clone().endOf("month").week() === 1
+        ? 53
+        : today.clone().endOf("month").week();
+    let calendar = [];
+    for (let week = startWeek; week <= endWeek; week++) {
+      calendar.push(
+        <DateRow key={week}>
+          {Array(7)
+            .fill(0)
+            .map((n, i) => {
+              let current = today
+                .clone()
+                .week(week)
+                .startOf("week")
+                .add(n + i, "day");
+              return (
+                <DateText className={`text`} key={i}>
+                  {current.format("D")}
+                </DateText>
+              );
+            })}
+        </DateRow>
+      );
+    }
+    return calendar;
+  };
+
   return (
     <HomeCalendarWrapper>
       <CalenderBox>
@@ -80,15 +116,7 @@ export default () => {
             <DateText>FRI</DateText>
             <DateText className="Saturday">SAT</DateText>
           </DateRow>
-          <DateRow>
-            <DateText>26</DateText>
-            <DateText>27</DateText>
-            <DateText>28</DateText>
-            <DateText>29</DateText>
-            <DateText>30</DateText>
-            <DateText>1</DateText>
-            <DateText>2</DateText>
-          </DateRow>
+          {generate()}
         </DateBodyBox>
       </CalenderBox>
     </HomeCalendarWrapper>