From 70a40c1c01c5159b38c861473811f07e55e8c68f Mon Sep 17 00:00:00 2001
From: Jay Sheen <jay.sheen@bpsoft.co.kr>
Date: Fri, 31 Oct 2025 16:57:28 +0900
Subject: [PATCH] Add locale support to calendar components (ko, en)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Applied i18n locale to both calendar components:

Changes to nice-calendar.tsx:
- Added useTranslation hook import
- Get current locale from i18n.language
- Updated all format functions (formatMonthYear, formatYear, formatMonth, formatDay, formatShortWeekday) to use currentLocale instead of hardcoded 'en'
- Added locale prop to Calendar component

Changes to nice-calendar-month.tsx:
- Added useTranslation hook import
- Get current locale from i18n.language
- Updated all format functions to use currentLocale instead of hardcoded 'en'
- Added locale prop to Calendar component

Now calendars will display in Korean when language is set to 'ko' and in English when set to 'en'.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/shared/ui/calendar/nice-calendar-month.tsx | 15 ++++++++++-----
 src/shared/ui/calendar/nice-calendar.tsx       | 15 ++++++++++-----
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/shared/ui/calendar/nice-calendar-month.tsx b/src/shared/ui/calendar/nice-calendar-month.tsx
index 2059b48..f2ee3b2 100644
--- a/src/shared/ui/calendar/nice-calendar-month.tsx
+++ b/src/shared/ui/calendar/nice-calendar-month.tsx
@@ -5,6 +5,7 @@ import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
 import { useEffect } from 'react';
 import { CalendarType } from '@/entities/common/model/types';
+import { useTranslation } from 'react-i18next';
 
 interface NiceCalendarProps {
   calendarOpen: boolean;
@@ -25,6 +26,9 @@ const NiceCalendarMonth = ({
   calendarType,
   setNewMonth
 }: NiceCalendarProps) => {
+  const { i18n } = useTranslation();
+  const currentLocale = i18n.language || 'en';
+
   const [valueYear, setValueYear] = useState<string>();
   const [minMonth, setMinMonth] = useState<Date | undefined>();
   const [maxMonth, setMaxMonth] = useState<Date | undefined>();
@@ -57,28 +61,28 @@ const NiceCalendarMonth = ({
   };
   
   const formatMonthYear = (locale: string | undefined, date: Date) => {
-    return date.toLocaleDateString('en', { 
+    return date.toLocaleDateString(currentLocale, {
       month: 'long',
       year: 'numeric'
     });
   };
   const formatYear = (locale: string | undefined, date: Date) => {
-    return date.toLocaleDateString('en', { 
+    return date.toLocaleDateString(currentLocale, {
       year: 'numeric'
     });
   };
   const formmatMonth = (locale: string | undefined, date: Date) => {
-    return date.toLocaleDateString('en', { 
+    return date.toLocaleDateString(currentLocale, {
       month: 'short'
     });
   };
   const formatDay = (locale: string | undefined, date: Date) => {
-    return date.toLocaleString('en', { 
+    return date.toLocaleString(currentLocale, {
       day: 'numeric'
     });
   };
   const formatShortWeekday = (locale: string | undefined, date: Date) => {
-    return date.toLocaleString('en', { 
+    return date.toLocaleString(currentLocale, {
       weekday: 'short'
     });
   };
@@ -95,6 +99,7 @@ const NiceCalendarMonth = ({
         <div className="bg-dim"></div>
         <CalendarWrapper onClick={ () => onClickToClose() }>
           <Calendar
+            locale={currentLocale}
             minDate={ minMonth }
             maxDate={ maxMonth }
             onClickMonth={ onChangeToMonth }
diff --git a/src/shared/ui/calendar/nice-calendar.tsx b/src/shared/ui/calendar/nice-calendar.tsx
index a6c1d66..9688ce7 100644
--- a/src/shared/ui/calendar/nice-calendar.tsx
+++ b/src/shared/ui/calendar/nice-calendar.tsx
@@ -5,6 +5,7 @@ import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
 import { useEffect } from 'react';
 import { CalendarType } from '@/entities/common/model/types';
+import { useTranslation } from 'react-i18next';
 
 interface NiceCalendarProps {
   calendarOpen: boolean;
@@ -29,6 +30,9 @@ const NiceCalendar = ({
   minDate: propMinDate,
   maxDate: propMaxDate
 }: NiceCalendarProps) => {
+  const { i18n } = useTranslation();
+  const currentLocale = i18n.language || 'en';
+
   const [valueDate, setValueDate] = useState<Date | undefined>();
   const [minDate, setMinDate] = useState<Date | undefined>();
   const [maxDate, setMaxDate] = useState<Date | undefined>();
@@ -63,28 +67,28 @@ const NiceCalendar = ({
   };
   
   const formatMonthYear = (locale: string | undefined, date: Date) => {
-    return date.toLocaleDateString('en', { 
+    return date.toLocaleDateString(currentLocale, {
       month: 'long',
       year: 'numeric'
     });
   };
   const formatYear = (locale: string | undefined, date: Date) => {
-    return date.toLocaleDateString('en', { 
+    return date.toLocaleDateString(currentLocale, {
       year: 'numeric'
     });
   };
   const formmatMonth = (locale: string | undefined, date: Date) => {
-    return date.toLocaleDateString('en', { 
+    return date.toLocaleDateString(currentLocale, {
       month: 'short'
     });
   };
   const formatDay = (locale: string | undefined, date: Date) => {
-    return date.toLocaleString('en', { 
+    return date.toLocaleString(currentLocale, {
       day: 'numeric'
     });
   };
   const formatShortWeekday = (locale: string | undefined, date: Date) => {
-    return date.toLocaleString('en', { 
+    return date.toLocaleString(currentLocale, {
       weekday: 'short'
     });
   };
@@ -101,6 +105,7 @@ const NiceCalendar = ({
         <div className="bg-dim"></div>
         <CalendarWrapper onClick={ () => onClickToClose() }>
           <Calendar
+            locale={currentLocale}
             minDate={ minDate }
             maxDate={ maxDate }
             onChange={ onchangeToDate }