From ff53c7b9c1fdec5e084f558f4b303b8eac7d1511 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Tue, 16 Nov 2021 01:57:09 -0600 Subject: [PATCH] Styling. Dynalically genrated the days of the month using date fns. --- component/calender/index.tsx | 19 +++-- package.json | 3 +- yarn.lock | 146 ++++++++++++++++++----------------- 3 files changed, 93 insertions(+), 75 deletions(-) diff --git a/component/calender/index.tsx b/component/calender/index.tsx index a1d8126..5ac1c0c 100644 --- a/component/calender/index.tsx +++ b/component/calender/index.tsx @@ -1,16 +1,24 @@ import React from "react"; import { Box, SimpleGrid } from "@chakra-ui/react"; +import { endOfMonth, getDate } from 'date-fns'; const Calender = (): JSX.Element => { + const today = new Date; + + const endOfCurrMonth = endOfMonth(today); + const lastDay = getDate(endOfCurrMonth); + + console.info(`This month has ${lastDay} days.`); + const daysArr = []; - for (let i = daysArr.length; i < 31; i++) { + for (let i = daysArr.length; i < lastDay; i++) { daysArr.push(daysArr.length + 1); } return ( { {daysArr.map((day) => { return (