Clicking on overflow dates activated navigation forward or backwards 1 month.

components/calender/index.tsx

@@ -2,7 +2,8 @@ import React, { useContext, useEffect, useState } from "react";
 import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
 import CalenderNav from "./CalenderNav";
 import { CalenderContext } from "../../contexts/CalenderContext";
-import { getDate } from "date-fns";
+import { getDate, sub, add, getYear, getMonth } from "date-fns";
+import { useRouter } from "next/router";
 // TODO: import types
 
 interface UpdateCalendarProps {
@@ -12,7 +13,8 @@ interface UpdateCalendarProps {
 }
 
 const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
-  const { layout, updateDate } = useContext(CalenderContext);
+  const { selectedDate, layout, updateDate } = useContext(CalenderContext);
+  const router = useRouter();
 
   useEffect(() => {
     if (newDate) {
@@ -42,7 +44,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
       const height = window.innerHeight - 60;
       setHeight(`${height}px`);
     }
-  }, [])
+  }, []);
 
   return (
     <VStack h={height} w="100%">
@@ -89,7 +91,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
           const thisWeek = month[week];
 
           return thisWeek.map((day) => {
-            const { date, isOverflow } = day;
+            const { date, isOverflow, overflowDirection } = day;
 
             return (
               <Box
@@ -99,6 +101,26 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
                 w="100%"
                 h="100%"
                 key={date}
+                {...(isOverflow && {
+                  onClick: () => {
+                    if (overflowDirection === "next") {
+                      console.log(overflowDirection);
+                      const newMonth = add(selectedDate, { months: 1 });
+
+                      const year = getYear(newMonth);
+                      const month = getMonth(newMonth) + 1;
+
+                      router.push(`/calendar/${year}/${month}`);
+                    } else if (overflowDirection === "prev") {
+                      const newMonth = sub(selectedDate, { months: 1 });
+
+                      const year = getYear(newMonth);
+                      const month = getMonth(newMonth) + 1;
+
+                      router.push(`/calendar/${year}/${month}`);
+                    }
+                  }
+                })}
               >
                 <Text w="100%" h="100%">
                   {`Day ${getDate(date)}`}

contexts/CalenderContext.tsx

@@ -31,6 +31,7 @@ interface WeekDays {
 
 interface MonthDay {
   isOverflow: boolean;
+  overflowDirection: "prev" | "next" | null;
   date: Date;
 }
 
@@ -112,16 +113,30 @@ const CalenderContextProvider = ({
    * @param {Date} currDate The date to be compared to the selected month.
    * @returns True if currDate is outside of the month of selectedDate, false if otherwise.
    */
-  const isOverflow = (selectedDate: Date, currDate: Date): boolean => {
+  const isOverflow = (
+    selectedDate: Date,
+    currDate: Date
+  ): {
+    isOverflow: boolean;
+    overflowDirection: "prev" | "next" | null;
+  } => {
     let flag = false;
+    let direction: "next" | "prev" | null = null;
+
     const start = startOfMonth(selectedDate);
     const end = endOfMonth(selectedDate);
 
-    if (isBefore(currDate, start) || isAfter(currDate, end)) {
+    if (isBefore(currDate, start)) {
       flag = true;
+      direction = "prev";
     }
 
-    return flag;
+    if (isAfter(currDate, end)) {
+      flag = true;
+      direction = "next";
+    }
+
+    return { isOverflow: flag, overflowDirection: direction };
   };
 
   /**
@@ -175,8 +190,9 @@ const CalenderContextProvider = ({
       const thisWeek = sundays[week];
 
       thisWeek.forEach((e, i) => {
+        const overflowInfo = isOverflow(selectedDate, sunCurrDate);
         const day: MonthDay = {
-          isOverflow: isOverflow(selectedDate, sunCurrDate),
+          ...overflowInfo,
           date: sunCurrDate
         };
         sunCurrDate = add(sunCurrDate, {

pages/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef } from "react";
 import { Box } from "@chakra-ui/react";
 import Calender from "../components/calender";
 import { CalenderContextProvider } from "../contexts/CalenderContext";