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