fix: yearly calender view week position and resizing and monthly calender view weeks

src/constants.ts

@@ -8,7 +8,7 @@ export const headerHeight = headerDayHeight + headerWeekHeight + headerMonthHeig
 export const weekWidth = 84;
 export const boxHeight = 56;
 export const leftColumnWidth = 196;
-export const singleDayWidth = 12;
+export const singleDayWidth = weekWidth / 7;
 export const zoom2ColumnWidth = 50;
 export const zoom2HeaderTopRowHeight = 24;
 export const zoom2HeaderMiddleRowHeight = 16;

src/context/CalendarProvider/CalendarProvider.tsx

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

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/getCols.ts

@@ -10,14 +10,16 @@ import {
 export const getCols = (zoom: number) => {
   const wrapperWidth = document.getElementById(outsideWrapperId)?.clientWidth || 0;
   const componentWidth = wrapperWidth - leftColumnWidth;
+  let ceiledValue = 0;
 
   switch (zoom) {
     case 1:
       return Math.ceil(componentWidth / dayWidth) * screenWidthMultiplier;
     case 2:
       return Math.ceil(componentWidth / zoom2ColumnWidth) * screenWidthMultiplier;
     default:
-      return Math.ceil(componentWidth / weekWidth) * screenWidthMultiplier;
+      ceiledValue = Math.ceil((componentWidth / weekWidth) * screenWidthMultiplier);
+      return ceiledValue % 2 === 0 ? ceiledValue : ceiledValue + 1;
   }
 };
 

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,8 @@ export const getDatesRange = (date: dayjs.Dayjs, zoom: number): DatesRange => {
       startDate = date.subtract(colsOffset, "hours");
       break;
     default:
-      startDate = date.subtract(colsOffset, "weeks");
+      daysFromMonday = (date.day() + 6) % 7;
+      startDate = date.subtract(colsOffset, "weeks").subtract(daysFromMonday, "days");
       break;
   }