From 2f67915253f9a1cae44ad84ebf67aa797363bb75 Mon Sep 17 00:00:00 2001
From: KumJungMin <37934668+KumJungMin@users.noreply.github.com>
Date: Fri, 14 Jun 2024 15:47:33 +0900
Subject: [PATCH] fix: highlight range of month in datePicker

---
 components/lib/calendar/Calendar.js | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index 5399e5e84d..40c361ace4 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -2328,17 +2328,29 @@ export const Calendar = React.memo(
         };
 
         const isMonthSelected = (month) => {
-            if (isComparable()) {
-                let value = isRangeSelection() ? props.value[0] : props.value;
+            if (!isComparable()) return false;
 
-                if (isMultipleSelection()) {
-                    return value.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === currentYear);
-                }
+            if (isMultipleSelection()) {
+                return props.value.some((v) => v.getMonth() === month && v.getFullYear() === currentYear);
+            } else if (isRangeSelection()) {
+                const [start, end] = props.value;
+                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 === currentYear && startMonth === month;
+                } else {
+                    const currentDate = new Date(currentYear, month, 1);
+                    const startDate = new Date(startYear, startMonth, 1);
+                    const endDate = new Date(endYear, endMonth, 1);
 
-                return value.getMonth() === month && value.getFullYear() === currentYear;
+                    return currentDate >= startDate && currentDate <= endDate;
+                }
+            } else {
+                return props.value.getMonth() === month && props.value.getFullYear() === currentYear;
             }
-
-            return false;
         };
 
         const isYearSelected = (year) => {