Showing
3 changed files
with
6 additions
and
27 deletions
1 | -import GridRow from "./GridRow.js"; | ||
2 | import { CalendarStateContext } from "../pages/Calendar"; | 1 | import { CalendarStateContext } from "../pages/Calendar"; |
3 | import { moveDate, toSunday } from "../utils/Dates"; | 2 | import { moveDate, toSunday } from "../utils/Dates"; |
4 | 3 | ||
5 | import React, { useContext } from "react"; | 4 | import React, { useContext } from "react"; |
5 | +import GridItem from "./GridItem.js"; | ||
6 | 6 | ||
7 | const Grid = () => { | 7 | const Grid = () => { |
8 | const { state } = useContext(CalendarStateContext); | 8 | const { state } = useContext(CalendarStateContext); |
... | @@ -13,9 +13,9 @@ const Grid = () => { | ... | @@ -13,9 +13,9 @@ const Grid = () => { |
13 | ndate.setDate(1); | 13 | ndate.setDate(1); |
14 | toSunday(ndate); | 14 | toSunday(ndate); |
15 | 15 | ||
16 | - for (let i = 0; i < 5; i++) { | 16 | + for (let i = 0; i < 35; i++) { |
17 | - rows.push(<GridRow key={i} startDate={new Date(ndate)} />); | 17 | + rows.push(<GridItem key={i} targetDate={new Date(ndate)} />); |
18 | - moveDate(ndate, "week", 1); | 18 | + moveDate(ndate, "day", 1); |
19 | } | 19 | } |
20 | 20 | ||
21 | return rows; | 21 | return rows; | ... | ... |
src/components/GridRow.js
deleted
100644 → 0
1 | -import { moveDate } from "../utils/Dates"; | ||
2 | -import GridItem from "./GridItem"; | ||
3 | - | ||
4 | -const GridRow = ({ startDate }) => { | ||
5 | - const renderItems = () => { | ||
6 | - const items = []; | ||
7 | - const ndate = new Date(startDate); | ||
8 | - | ||
9 | - for (let i = 0; i < 7; i++) { | ||
10 | - items.push(<GridItem key={i} targetDate={new Date(ndate)} />); | ||
11 | - moveDate(ndate, "day", 1); | ||
12 | - } | ||
13 | - | ||
14 | - return items; | ||
15 | - }; | ||
16 | - | ||
17 | - return <div className="GridRow">{renderItems()}</div>; | ||
18 | -}; | ||
19 | - | ||
20 | -export default GridRow; |
... | @@ -23,7 +23,6 @@ | ... | @@ -23,7 +23,6 @@ |
23 | padding: 10px 5px 10px 5px; | 23 | padding: 10px 5px 10px 5px; |
24 | } | 24 | } |
25 | 25 | ||
26 | -.GridRow, | ||
27 | .GridHead { | 26 | .GridHead { |
28 | display: flex; | 27 | display: flex; |
29 | } | 28 | } |
... | @@ -33,8 +32,8 @@ | ... | @@ -33,8 +32,8 @@ |
33 | } | 32 | } |
34 | 33 | ||
35 | .Grid { | 34 | .Grid { |
36 | - display: flex; | 35 | + display: grid; |
37 | - flex-direction: column; | 36 | + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; |
38 | overflow-y: auto; | 37 | overflow-y: auto; |
39 | height: calc(100vh - 85px - 50px); | 38 | height: calc(100vh - 85px - 50px); |
40 | border: solid thin gray; | 39 | border: solid thin gray; | ... | ... |
-
Please register or login to post a comment