Correcting week numbers

Minor cleanup and correcting isoWeek() to week() as it caused problems when resizing window + showing 52 weeks or 53 weeks depending on year

src/context/CalendarProvider/CalendarProvider.tsx

@@ -94,13 +94,14 @@ const CalendarProvider = ({
   const loadMore = useCallback(
     (direction: Direction) => {
       const cols = getVisibleCols(zoom);
+      let weekOffset: number;
       let offset: number;
       switch (zoom) {
         case 0:
-          const originalOffset = cols * 7;
-          offset = Math.round(originalOffset);          
+          weekOffset = cols * 7;
+          offset = Math.round(weekOffset);
           if (offset % 2 !== 0) {
-            offset += (offset > originalOffset ? 2 : 5);
+            offset += offset > weekOffset ? 2 : 5;
           }
           break;
         case 1:

src/utils/dates.ts

@@ -19,7 +19,7 @@ export const parseDay = (data: dayjs.Dayjs): Day => {
     hour: data.hour(),
     dayName: data.format("ddd"),
     dayOfMonth: data.date(),
-    weekOfYear: data.isoWeek(),
+    weekOfYear: data.week(),
     month: data.month(),
     monthName: data.format("MMMM"),
     isBusinessDay: getIsBusinessDay(data),

src/utils/drawHeader/drawRows/drawWeeksInMiddle.ts

@@ -1,16 +1,20 @@
 import dayjs from "dayjs";
+import isoWeeksInYear from "dayjs/plugin/isoWeeksInYear";
+import isLeapYear from "dayjs/plugin/isLeapYear";
 import { Day } from "@/types/global";
 import {
   dayWidth,
   fonts,
   headerMonthHeight,
   headerWeekHeight,
-  middleRowTextYPos,
-  weeksInYear
+  middleRowTextYPos
 } from "@/constants";
 import { drawRow } from "@/utils/drawRow";
 import { Theme } from "@/styles";
 
+dayjs.extend(isoWeeksInYear);
+dayjs.extend(isLeapYear);
+
 export const drawWeeksInMiddle = (
   ctx: CanvasRenderingContext2D,
   startDate: Day,
@@ -25,7 +29,9 @@ export const drawWeeksInMiddle = (
   let xPos = 0;
 
   for (let i = 0; i < weeksThreshold; i++) {
-    const day = dayjs(`${startDate.year}-${startDate.month + 1}-${startDate.dayOfMonth}`).day();
+    const formattedDate = `${startDate.year}-${startDate.month + 1}-${startDate.dayOfMonth}`;
+    const day = dayjs(formattedDate).day();
+    const weeksInYear = dayjs(formattedDate).isoWeeksInYear();
     let weekIndex = (startWeek + i) % weeksInYear;
 
     if (weekIndex <= 0) {

src/utils/getDatesRange.ts

@@ -15,6 +15,7 @@ export const getDatesRange = (date: dayjs.Dayjs, zoom: number): DatesRange => {
   const colsOffset = getCols(zoom) / 2;
 
   let startDate;
+  let daysFromMonday: number;
   switch (zoom) {
     case 1:
       startDate = date.subtract(colsOffset, "days");
@@ -23,7 +24,7 @@ export const getDatesRange = (date: dayjs.Dayjs, zoom: number): DatesRange => {
       startDate = date.subtract(colsOffset, "hours");
       break;
     default:
-      const daysFromMonday = (date.day() + 6) % 7;
+      daysFromMonday = (date.day() + 6) % 7;
       startDate = date.subtract(colsOffset, "weeks").subtract(daysFromMonday, "days");
       break;
   }