HyeonJun Jeon

[Add] Day calendar

1 +import React, { useContext } from "react";
2 +import GridItem from "./GridItem.js";
3 +
4 +import { CalendarStateContext } from "../pages/Calendar";
5 +import "../styles/Day.css";
6 +
7 +const Day = () => {
8 + const { state } = useContext(CalendarStateContext);
9 + return (
10 + <div className="Day">
11 + <GridItem targetDate={new Date(state.date)} />
12 + </div>
13 + );
14 +};
15 +
16 +export default Day;
...@@ -102,6 +102,7 @@ button:disabled { ...@@ -102,6 +102,7 @@ button:disabled {
102 border-radius: 3px; 102 border-radius: 3px;
103 cursor: pointer; 103 cursor: pointer;
104 position: relative; 104 position: relative;
105 + flex-flow: wrap;
105 } 106 }
106 107
107 .ScheduleItem > span { 108 .ScheduleItem > span {
...@@ -128,6 +129,11 @@ button:disabled { ...@@ -128,6 +129,11 @@ button:disabled {
128 padding: 0; 129 padding: 0;
129 } 130 }
130 131
132 +.s_substr {
133 + width: 100%;
134 + font-weight: bold;
135 +}
136 +
131 [popup] { 137 [popup] {
132 position: absolute; 138 position: absolute;
133 z-index: 1000; 139 z-index: 1000;
......
1 +.GridItem[scope="day"] {
2 + flex-basis: 100px;
3 + padding: 5px;
4 +}
5 +
6 +.GridItem[scope="day"] > span {
7 + display: none;
8 +}
9 +
10 +.GridItem[scope="day"] > .ScheduleItem {
11 + margin: 3px 0 3px 0;
12 +}
13 +
14 +.GridItem[scope="day"] > .ScheduleItem > span {
15 + line-height: 30px;
16 + margin: 5px 5px 5px 5px;
17 + font-size: large;
18 +}
19 +
20 +.GridItem[scope="day"] > .ScheduleItem > img {
21 + width: 30px;
22 + height: 30px;
23 + margin: 5px;
24 +}