contexts/CalenderContext.tsx

@@ -43,23 +43,19 @@ const CalenderContextProvider = ({
     getDate(endOfMonth(selectedDate))
   );
 
-  const [daysOfMonth, setDaysOfMonth] = useState<[number]>([0]);
+  const [daysOfMonth, setDaysOfMonth] = useState<[number]>([1]);
 
   // Update or populate the days of the month.
   const populateDays = (): void => {
     let newDaysOfMonth: [number] = [...daysOfMonth];
 
     if (newDaysOfMonth.length > 1) {
-      newDaysOfMonth = [0];
+      newDaysOfMonth = [1];
     }
 
     for (let i = 1; i < endOfSelectedMonth; i++) {
-      if (newDaysOfMonth[i - 1] === 0) {
-        newDaysOfMonth[i - 1] = i;
-      } else {
       newDaysOfMonth.push(i + 1);
     }
-    }
 
     setDaysOfMonth(newDaysOfMonth);
   };

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "lucid-creations-media-potty-chart",
   "homepage": "https://lucidcreations.media/introducing-code-name-potty-chart/",
-  "version": "v0.0.4.0-pre-alpha",
+  "version": "v0.0.4.1-pre-alpha",
   "author": {
     "name": "Lucid Creations Media",
     "url": "https://lucidcreations.media",
@@ -16,13 +16,13 @@
     "pretty": "prettier --write ."
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.7.2",
+    "@chakra-ui/react": "^1.7.3",
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
     "@types/react": "^17.0.37",
     "date-fns": "^2.27.0",
     "formik": "^2.2.9",
-    "framer-motion": "^5.3.3",
+    "framer-motion": "^5.4.5",
     "next": "12.0.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -30,15 +30,15 @@
   },
   "devDependencies": {
     "@iconify/react": "^3.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/eslint-plugin": "^5.6.0",
-    "eslint": "<8.0.0",
+    "eslint": "^8.4.1",
-    "eslint-config-next": "12.0.3",
+    "eslint-config-next": "12.0.7",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "prettier": "^2.5.1",
-    "typescript": "4.4.4"
+    "typescript": "4.5.2"
   },
   "packageManager": "yarn@3.1.0"
 }

pages/index.tsx

@@ -13,8 +13,8 @@ interface UpdateCalendarProps {
 const IndexPage = (): JSX.Element => {
   const date = useRef<UpdateCalendarProps>({
     year: parseInt(format(new Date(), "y")),
-    month: parseInt(format(new Date(), "d")),
+    month: parseInt(format(new Date(), "M")),
-    day: parseInt(format(new Date(), "L")),
+    day: parseInt(format(new Date(), "d")),
   });
   return (
     <Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">