diff --git a/src/constants.ts b/src/constants.ts index 99fb8570..b182bf5d 100644 --- a/src/constants.ts +++ b/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; diff --git a/src/context/CalendarProvider/CalendarProvider.tsx b/src/context/CalendarProvider/CalendarProvider.tsx index 7953af0b..444bff3a 100644 --- a/src/context/CalendarProvider/CalendarProvider.tsx +++ b/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; diff --git a/src/utils/dates.ts b/src/utils/dates.ts index 94bf0e71..dfb424fa 100644 --- a/src/utils/dates.ts +++ b/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), diff --git a/src/utils/drawHeader/drawRows/drawWeeksInMiddle.ts b/src/utils/drawHeader/drawRows/drawWeeksInMiddle.ts index 601f13f6..c61c8e50 100644 --- a/src/utils/drawHeader/drawRows/drawWeeksInMiddle.ts +++ b/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) { diff --git a/src/utils/getCols.ts b/src/utils/getCols.ts index 41d300dd..37e1c7a3 100644 --- a/src/utils/getCols.ts +++ b/src/utils/getCols.ts @@ -10,6 +10,7 @@ import { export const getCols = (zoom: number) => { const wrapperWidth = document.getElementById(outsideWrapperId)?.clientWidth || 0; const componentWidth = wrapperWidth - leftColumnWidth; + let ceiledValue = 0; switch (zoom) { case 1: @@ -17,7 +18,8 @@ export const getCols = (zoom: number) => { 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; } }; diff --git a/src/utils/getDatesRange.ts b/src/utils/getDatesRange.ts index 4c69470c..97b7c685 100644 --- a/src/utils/getDatesRange.ts +++ b/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; }