diff --git a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap index 1f0898e341..d93e9221d0 100644 --- a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -11598,3 +11598,3295 @@ Array [ `; exports[`renders components/calendar/demo/select.tsx extend context correctly 2`] = `[]`; + +exports[`renders components/calendar/demo/week.tsx extend context correctly 1`] = ` +Array [ +
+
+
+
+ + + + + + 2016 + + +
+
+
+
+
+ 2006 +
+
+ 2007 +
+
+
+
+
+
+
+
+ 2006 +
+
+
+
+ 2007 +
+
+
+
+ 2008 +
+
+
+
+ 2009 +
+
+
+
+ 2010 +
+
+
+
+ 2011 +
+
+
+
+ 2012 +
+
+
+
+ 2013 +
+
+
+
+ 2014 +
+
+
+
+ 2015 +
+
+
+
+ 2016 +
+
+
+
+ 2017 +
+
+
+
+ 2018 +
+
+
+
+ 2019 +
+
+
+
+ 2020 +
+
+
+
+ 2021 +
+
+
+
+ 2022 +
+
+
+
+ 2023 +
+
+
+
+ 2024 +
+
+
+
+ 2025 +
+
+
+
+
+
+
+
+ +
+
+
+ + + + + + Nov + + +
+
+
+
+
+ 0 +
+
+ 1 +
+
+
+
+
+
+
+
+ Jan +
+
+
+
+ Feb +
+
+
+
+ Mar +
+
+
+
+ Apr +
+
+
+
+ May +
+
+
+
+ Jun +
+
+
+
+ Jul +
+
+
+
+ Aug +
+
+
+
+ Sep +
+
+
+
+ Oct +
+
+
+
+ Nov +
+
+
+
+ Dec +
+
+
+
+
+
+
+
+ +
+
+ + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 45 +
+ 		+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+ 46 +
+ 		+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+ 47 +
+ 		+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+ 48 +
+ 		+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+ 49 +
+ 		+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+ 50 +
+ 		+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+
+
, +
, +
+
+
+
+ + + + + + 2016 + + +
+
+
+
+
+ 2006 +
+
+ 2007 +
+
+
+
+
+
+
+
+ 2006 +
+
+
+
+ 2007 +
+
+
+
+ 2008 +
+
+
+
+ 2009 +
+
+
+
+ 2010 +
+
+
+
+ 2011 +
+
+
+
+ 2012 +
+
+
+
+ 2013 +
+
+
+
+ 2014 +
+
+
+
+ 2015 +
+
+
+
+ 2016 +
+
+
+
+ 2017 +
+
+
+
+ 2018 +
+
+
+
+ 2019 +
+
+
+
+ 2020 +
+
+
+
+ 2021 +
+
+
+
+ 2022 +
+
+
+
+ 2023 +
+
+
+
+ 2024 +
+
+
+
+ 2025 +
+
+
+
+
+
+
+
+ +
+
+
+ + + + + + Nov + + +
+
+
+
+
+ 0 +
+
+ 1 +
+
+
+
+
+
+
+
+ Jan +
+
+
+
+ Feb +
+
+
+
+ Mar +
+
+
+
+ Apr +
+
+
+
+ May +
+
+
+
+ Jun +
+
+
+
+ Jul +
+
+
+
+ Aug +
+
+
+
+ Sep +
+
+
+
+ Oct +
+
+
+
+ Nov +
+
+
+
+ Dec +
+
+
+
+
+
+
+
+ +
+
+ + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 45 +
+ 		+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+ 46 +
+ 		+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+ 47 +
+ 		+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+ 48 +
+ 		+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+ 49 +
+ 		+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+ 50 +
+ 		+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+
+
, +] +`; + +exports[`renders components/calendar/demo/week.tsx extend context correctly 2`] = `[]`; diff --git a/components/calendar/__tests__/__snapshots__/demo.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo.test.ts.snap index afcaa40c6d..93792dcd33 100644 --- a/components/calendar/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/calendar/__tests__/__snapshots__/demo.test.ts.snap @@ -7096,3 +7096,2017 @@ Array [ , ] `; + +exports[`renders components/calendar/demo/week.tsx correctly 1`] = ` +Array [ +
+
+
+
+ + + + + + 2016 + + +
+ +
+
+
+ + + + + + Nov + + +
+ +
+
+ + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 45 +
+ 		+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+ 46 +
+ 		+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+ 47 +
+ 		+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+ 48 +
+ 		+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+ 49 +
+ 		+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+ 50 +
+ 		+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+
+
, +
, +
+
+
+
+ + + + + + 2016 + + +
+ +
+
+
+ + + + + + Nov + + +
+ +
+
+ + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 45 +
+ 		+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+ 46 +
+ 		+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+ 47 +
+ 		+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+ 48 +
+ 		+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+ 49 +
+ 		+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+ 50 +
+ 		+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+
+
, +] +`; diff --git a/components/calendar/demo/week.md b/components/calendar/demo/week.md new file mode 100644 index 0000000000..cba80646e7 --- /dev/null +++ b/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`. diff --git a/components/calendar/demo/week.tsx b/components/calendar/demo/week.tsx new file mode 100644 index 0000000000..ccd28a21f9 --- /dev/null +++ b/components/calendar/demo/week.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Calendar } from 'antd'; + +const App: React.FC = () => ( + <> + +
+ + +); + +export default App; diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx index cb47428d20..96ed4afa33 100644 --- a/components/calendar/generateCalendar.tsx +++ b/components/calendar/generateCalendar.tsx @@ -49,6 +49,7 @@ export interface CalendarProps { 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 = (generateConfig: GenerateCo mode, validRange, fullscreen = true, + showWeek, onChange, onPanelChange, onSelect, @@ -299,6 +301,7 @@ const generateCalendar = (generateConfig: GenerateCo picker={panelMode} disabledDate={mergedDisabledDate} hideHeader + showWeek={showWeek} /> , ); diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md index ddf4655bac..87cf2c9885 100644 --- a/components/calendar/index.en-US.md +++ b/components/calendar/index.en-US.md @@ -19,6 +19,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda Card Selectable Calendar Lunar Calendar +Show Week Customize Header Component Token @@ -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` | | diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index 3e76ce755a..46217865b6 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -20,6 +20,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA 卡片模式 选择功能 农历日历 +周数 自定义头部 组件 Token @@ -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` | | diff --git a/components/calendar/style/index.ts b/components/calendar/style/index.ts index fdeec49379..180da3d1e6 100644 --- a/components/calendar/style/index.ts +++ b/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',