feat: Calendar support showWeek prop (#52072)

components/calendar/demo/week.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+通过将 `showWeek` 属性设置为 `true`，在全屏日历中显示周数。
+
+## en-US
+
+Show week number in fullscreen calendar by setting `showWeek` prop to `true`.

components/calendar/demo/week.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Calendar } from 'antd';
+
+const App: React.FC = () => (
+  <>
+    <Calendar fullscreen showWeek />
+    <br />
+    <Calendar fullscreen={false} showWeek />
+  </>
+);
+
+export default App;

components/calendar/generateCalendar.tsx

@@ -49,6 +49,7 @@ export interface CalendarProps<DateType> {
   defaultValue?: DateType;
   mode?: CalendarMode;
   fullscreen?: boolean;
+  showWeek?: boolean;
   onChange?: (date: DateType) => void;
   onPanelChange?: (date: DateType, mode: CalendarMode) => void;
   onSelect?: (date: DateType, selectInfo: SelectInfo) => void;
@@ -89,6 +90,7 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
       mode,
       validRange,
       fullscreen = true,
+      showWeek,
       onChange,
       onPanelChange,
       onSelect,
@@ -299,6 +301,7 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
           picker={panelMode}
           disabledDate={mergedDisabledDate}
           hideHeader
+          showWeek={showWeek}
         />
       </div>,
     );

components/calendar/index.en-US.md

@@ -19,6 +19,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 <code src="./demo/card.tsx" clientOnly>Card</code>
 <code src="./demo/select.tsx" clientOnly>Selectable Calendar</code>
 <code src="./demo/lunar.tsx" clientOnly>Lunar Calendar</code>
+<code src="./demo/week.tsx" clientOnly version="5.23.0">Show Week</code>
 <code src="./demo/customize-header.tsx" clientOnly>Customize Header</code>
 <code src="./demo/component-token.tsx" debug>Component Token</code>
 
@@ -45,6 +46,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | defaultValue | The date selected by default | [dayjs](https://day.js.org/) | - |  |
 | disabledDate | Function that specifies the dates that cannot be selected, `currentDate` is same dayjs object as `value` prop which you shouldn't mutate it](https://github.com/ant-design/ant-design/issues/30987) | (currentDate: Dayjs) => boolean | - |  |
 | fullscreen | Whether to display in full-screen | boolean | true |  |
+| showWeek | Whether to display week number | boolean | false | 5.23.0 |
 | headerRender | Render custom header in panel | function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()}) | - |  |
 | locale | The calendar's locale | object | [(default)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
 | mode | The display mode of the calendar | `month` \| `year` | `month` |  |

components/calendar/index.zh-CN.md

@@ -20,6 +20,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 <code src="./demo/card.tsx" clientOnly>卡片模式</code>
 <code src="./demo/select.tsx" clientOnly>选择功能</code>
 <code src="./demo/lunar.tsx" clientOnly>农历日历</code>
+<code src="./demo/week.tsx" clientOnly version="5.23.0">周数</code>
 <code src="./demo/customize-header.tsx" clientOnly>自定义头部</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
 
@@ -46,6 +47,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 | defaultValue | 默认展示的日期 | [dayjs](https://day.js.org/) | - |  |
 | disabledDate | 不可选择的日期，参数为当前 `value`，注意使用时[不要直接修改](https://github.com/ant-design/ant-design/issues/30987) | (currentDate: Dayjs) => boolean | - |  |
 | fullscreen | 是否全屏显示 | boolean | true |  |
+| showWeek | 是否显示周数列 | boolean | false | 5.23.0 |
 | headerRender | 自定义头部内容 | function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()}) | - |  |
 | locale | 国际化配置 | object | [(默认配置)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
 | mode | 初始模式 | `month` \| `year` | `month` |  |

components/calendar/style/index.ts

@@ -149,6 +149,18 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
           },
         },
       },
+      [`${componentCls}-cell-week ${componentCls}-cell-inner`]: {
+        display: 'block',
+        borderRadius: 0,
+        borderTop: `${unit(token.lineWidthBold)} ${token.lineType} ${token.colorSplit}`,
+        width: '100%',
+        height: token
+          .calc(token.dateValueHeight)
+          .add(token.dateContentHeight)
+          .add(token.calc(token.paddingXS).div(2))
+          .add(token.lineWidthBold)
+          .equal(),
+      },
       [`${componentCls}-cell`]: {
         '&::before': {
           display: 'none',