fix: Missing calendar days when weekStart is changed

Author: Jasenkoo

index.d.ts

@@ -37,7 +37,7 @@ interface Vue3DatePicker {
     maxDate?: Date | string;
     minTime?: { hours?: number | string; minutes?: number | string };
     maxTime?: { hours?: number | string; minutes?: number | string };
-    weekStart?: string | number;
+    weekStart?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 0 | 1 | 2 | 3 | 4 | 5 | 6;
     disabled?: boolean;
     readonly?: boolean;
     format?:

src/Vue3DatePicker/Vue3DatePicker.vue

@@ -107,6 +107,8 @@
         ITextInputOptions,
         ModelValue,
         ITimeValue,
+        WeekStartNum,
+        WeekStartStr,
     } from './interfaces';
     import { clickOutsideDirective as vClickOutsideDirective } from './directives/clickOutside';
     import { getDateHours, getDateMinutes, getDefaultPattern } from './utils/date-utils';
@@ -137,7 +139,7 @@
         maxDate: { type: [Date, String] as PropType<Date | string>, default: null },
         minTime: { type: Object as PropType<ITimeValue>, default: () => ({}) },
         maxTime: { type: Object as PropType<ITimeValue>, default: () => ({}) },
-        weekStart: { type: [String, Number] as PropType<string | number>, default: 1 },
+        weekStart: { type: [String, Number] as PropType<WeekStartNum | WeekStartStr>, default: 1 },
         disabled: { type: Boolean as PropType<boolean>, default: false },
         readonly: { type: Boolean as PropType<boolean>, default: false },
         monthNameFormat: { type: String as PropType<'long' | 'short'>, default: 'short' },

src/Vue3DatePicker/components/DatepickerMenu.vue

@@ -82,6 +82,8 @@
         IFormat,
         InternalModuleValue,
         ITimeValue,
+        WeekStartNum,
+        WeekStartStr,
     } from '../interfaces';
     import { mapSlots } from './composition/slots';
     import { getCalendarDays, getMonths, getYears } from '../utils/util';
@@ -100,7 +102,7 @@
         uid: { type: String as PropType<string>, default: 'dp' },
         internalModelValue: { type: [Date, Array] as PropType<InternalModuleValue>, default: null },
         weekNumbers: { type: Boolean as PropType<boolean>, default: false },
-        weekStart: { type: [Number, String] as PropType<number | string>, default: 1 },
+        weekStart: { type: [Number, String] as PropType<WeekStartNum | WeekStartStr>, default: 1 },
         disableMonthYearSelect: { type: Boolean as PropType<boolean>, default: false },
         menuClassName: { type: String as PropType<string>, default: null },
         calendarClassName: { type: String as PropType<string>, default: null },

src/Vue3DatePicker/interfaces.ts

@@ -74,6 +74,9 @@ export interface ITimeValue {
 
 export type ModelValue = Date | Date[] | string | string[] | ITimeValue | ITimeValue[] | IMonthValue | null;
 
+export type WeekStartNum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export type WeekStartStr = '0' | '1' | '2' | '3' | '4' | '5' | '6';
+
 export type UseCalendar = {
     range: boolean;
     startDate: Date | string;

src/Vue3DatePicker/utils/util.ts

@@ -1,4 +1,12 @@
-import { ICalendarDate, ICalendarDay, IDateFilter, IDefaultSelect, ITextInputOptions } from '../interfaces';
+import {
+    ICalendarDate,
+    ICalendarDay,
+    IDateFilter,
+    IDefaultSelect,
+    ITextInputOptions,
+    WeekStartNum,
+} from '../interfaces';
+import { getAddedDays, isDateEqual, resetDateTime } from './date-utils';
 
 /**
  * Depending on a week start get starting date of the current calendar
@@ -13,12 +21,6 @@ const getFirstDayOfTheFirstWeek = (firstDate: Date, start: number): Date => {
     return startDate;
 };
 
-// From the giving date get the date after 7 days
-const getSevenDaysOffset = (date: Date): Date => {
-    const startDate = new Date(JSON.parse(JSON.stringify(date)));
-    return new Date(startDate.setDate(startDate.getDate() + 7));
-};
-
 // Get 7 days from the provided start date, month is used to check whether the date is from the specified month or in the offset
 const getWeekDays = (startDay: Date, month: number, hideOffsetDates: boolean): ICalendarDay[] => {
     const startDate = new Date(JSON.parse(JSON.stringify(startDay)));
@@ -36,33 +38,30 @@ const getWeekDays = (startDay: Date, month: number, hideOffsetDates: boolean): I
     return dates;
 };
 
-/**
- * Returns the number of weeks in a month, each week must have current month date in
- */
-const getNumberOfWeeksInAMonth = (firstDate: Date, lastDate: Date): number => {
-    return Math.ceil((firstDate.getDay() + lastDate.getDate() - 1) / 7);
-};
-
 // Get days for the calendar to be displayed in a table grouped by weeks
 export const getCalendarDays = (
     month: number,
     year: number,
-    start: number,
+    start: WeekStartNum,
     hideOffsetDates: boolean,
 ): ICalendarDate[] => {
     const weeks: ICalendarDate[] = [];
     const firstDate = new Date(year, month, 1);
     const lastDate = new Date(year, month + 1, 0);
 
-    let firstDateInCalendar = getFirstDayOfTheFirstWeek(firstDate, start);
-    const weeksInMonth = getNumberOfWeeksInAMonth(firstDate, lastDate);
-    for (let week = 0; week < weeksInMonth; week++) {
-        if (week !== 0) {
-            firstDateInCalendar = getSevenDaysOffset(firstDateInCalendar);
-        }
-        const days = getWeekDays(firstDateInCalendar, month, hideOffsetDates);
+    const firstDateInCalendar = getFirstDayOfTheFirstWeek(firstDate, start);
+
+    const addDaysToWeek = (date: Date) => {
+        const days = getWeekDays(date, month, hideOffsetDates);
         weeks.push({ days });
-    }
+        if (
+            !weeks[weeks.length - 1].days.some((day) => isDateEqual(resetDateTime(day.value), resetDateTime(lastDate)))
+        ) {
+            const nextDate = getAddedDays(date, 7);
+            addDaysToWeek(nextDate);
+        }
+    };
+    addDaysToWeek(firstDateInCalendar);
 
     return weeks;
 };