HyeonJun Jeon

[Add] Day calendar

import React, { useContext } from "react";
import GridItem from "./GridItem.js";
import { CalendarStateContext } from "../pages/Calendar";
import "../styles/Day.css";
const Day = () => {
const { state } = useContext(CalendarStateContext);
return (
<div className="Day">
<GridItem targetDate={new Date(state.date)} />
</div>
);
};
export default Day;
......@@ -102,6 +102,7 @@ button:disabled {
border-radius: 3px;
cursor: pointer;
position: relative;
flex-flow: wrap;
}
.ScheduleItem > span {
......@@ -128,6 +129,11 @@ button:disabled {
padding: 0;
}
.s_substr {
width: 100%;
font-weight: bold;
}
[popup] {
position: absolute;
z-index: 1000;
......
.GridItem[scope="day"] {
flex-basis: 100px;
padding: 5px;
}
.GridItem[scope="day"] > span {
display: none;
}
.GridItem[scope="day"] > .ScheduleItem {
margin: 3px 0 3px 0;
}
.GridItem[scope="day"] > .ScheduleItem > span {
line-height: 30px;
margin: 5px 5px 5px 5px;
font-size: large;
}
.GridItem[scope="day"] > .ScheduleItem > img {
width: 30px;
height: 30px;
margin: 5px;
}