From 70ba0042b08dc397ab8c1c0108f38484a76a07c4 Mon Sep 17 00:00:00 2001
From: KumJungMin <37934668+KumJungMin@users.noreply.github.com>
Date: Fri, 28 Jun 2024 08:31:50 +0900
Subject: [PATCH] fix: highlight range of month in MonthMode

---
 components/lib/calendar/Calendar.vue | 29 ++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index 9f2104153..d187267e0 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -704,17 +704,30 @@ export default {
             return false;
         },
         isMonthSelected(month) {
-            if (this.isComparable()) {
-                let value = this.isRangeSelection() ? this.modelValue[0] : this.modelValue;
+            if (!this.isComparable()) return false;
 
-                if (this.isMultipleSelection()) {
-                    return value.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === this.currentYear);
+            if (this.isMultipleSelection()) {
+                return this.modelValue.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === this.currentYear);
+            } else if (this.isRangeSelection()) {
+                const [start, end] = this.modelValue;
+                const startYear = start ? start.getFullYear() : null;
+                const endYear = end ? end.getFullYear() : null;
+                const startMonth = start ? start.getMonth() : null;
+                const endMonth = end ? end.getMonth() : null;
+
+                if (!end) {
+                    return startYear === this.currentYear && startMonth === month;
                 } else {
-                    return value.getMonth() === month && value.getFullYear() === this.currentYear;
-                }
-            }
+                    const currentDate = new Date(this.currentYear, month, 1);
+                    const startDate = new Date(startYear, startMonth, 1);
+                    const endDate = new Date(endYear, endMonth, 1);
 
-            return false;
+                    return currentDate >= startDate && currentDate <= endDate;
+                }
+
+            } else {
+                return this.modelValue.getMonth() === month && this.modelValue.getFullYear() === this.currentYear;
+            }
         },
         isYearSelected(year) {
             if (this.isComparable()) {