From 37abf776f442f9a93c38ead903b475d9675054a1 Mon Sep 17 00:00:00 2001
From: Lansana Diomande <66433100+Asanio06@users.noreply.github.com>
Date: Wed, 7 Aug 2024 17:12:32 +0200
Subject: [PATCH] fix(Calendar): make Calendar locale overriding locale from
 ConfigProvider (#50236)

Co-authored-by: Lansana DIOMANDE <lansana.diomande@cartier.comm>
---
 components/calendar/__tests__/index.test.tsx | 18 +++++++++++++++
 components/calendar/generateCalendar.tsx     | 24 +++++---------------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/components/calendar/__tests__/index.test.tsx b/components/calendar/__tests__/index.test.tsx
index 74a22dd453..c4dc8a6eff 100644
--- a/components/calendar/__tests__/index.test.tsx
+++ b/components/calendar/__tests__/index.test.tsx
@@ -18,6 +18,7 @@ import Button from '../../radio/radioButton';
 import Select from '../../select';
 import Header from '../Header';
 import type { CalendarHeaderProps } from '../Header';
+import ConfigProvider from '../../config-provider';
 
 const ref: {
   calendarProps?: PickerPanelProps;
@@ -208,6 +209,23 @@ describe('Calendar', () => {
     MockDate.reset();
   });
 
+  it('Calendar locale support should override ConfigProvider locale', () => {
+    MockDate.set(Dayjs('2018-10-19').valueOf());
+    // eslint-disable-next-line global-require
+    const zhCN = require('../locale/zh_CN').default;
+    // eslint-disable-next-line global-require
+    const enUs = require('../../locale/en_US').default;
+    const wrapper = render(
+      <ConfigProvider locale={enUs}>
+        <Calendar locale={zhCN} />
+      </ConfigProvider>,
+    );
+    expect(wrapper.container.querySelector('.ant-picker-content thead')?.textContent).toBe(
+      '一二三四五六日',
+    );
+    MockDate.reset();
+  });
+
   describe('onPanelChange', () => {
     it('trigger when click last month of date', () => {
       const onPanelChange = jest.fn();
diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx
index f291cf6666..cb47428d20 100644
--- a/components/calendar/generateCalendar.tsx
+++ b/components/calendar/generateCalendar.tsx
@@ -172,20 +172,6 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
       onSelect?.(date, { source });
     };
 
-    // ====================== Locale ======================
-    const getDefaultLocale = () => {
-      const { locale } = props;
-      const result = {
-        ...enUS,
-        ...locale,
-      };
-      result.lang = {
-        ...result.lang,
-        ...locale?.lang,
-      };
-      return result;
-    };
-
     // ====================== Render ======================
     const dateRender = React.useCallback(
       (date: DateType, info: CellRenderInfo<DateType>): React.ReactNode => {
@@ -244,7 +230,9 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
       [monthFullCellRender, monthCellRender, cellRender, fullCellRender],
     );
 
-    const [contextLocale] = useLocale('Calendar', getDefaultLocale);
+    const [contextLocale] = useLocale('Calendar', enUS);
+
+    const locale = { ...contextLocale, ...props.locale! };
 
     const mergedCellRender: RcBasePickerPanelProps['cellRender'] = (current, info) => {
       if (info.type === 'date') {
@@ -254,7 +242,7 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
       if (info.type === 'month') {
         return monthRender(current, {
           ...info,
-          locale: contextLocale?.lang,
+          locale: locale?.lang,
         });
       }
     };
@@ -292,7 +280,7 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
             generateConfig={generateConfig}
             mode={mergedMode}
             fullscreen={fullscreen}
-            locale={contextLocale?.lang}
+            locale={locale?.lang}
             validRange={validRange}
             onChange={onInternalSelect}
             onModeChange={triggerModeChange}
@@ -301,7 +289,7 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
         <RCPickerPanel
           value={mergedValue}
           prefixCls={prefixCls}
-          locale={contextLocale?.lang}
+          locale={locale?.lang}
           generateConfig={generateConfig}
           cellRender={mergedCellRender}
           onSelect={(nextDate) => {