diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index ccf50bcf260..be52bac0870 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -1,5 +1,13 @@ # CHANGELOG +## NEXT_VERSION + +`NEXT_VERSION` + +### Features + +- `n-calendar` adds `cell` slot + ## 2.43.1 `2025-09-15` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 7c0e0300828..c73a4a85814 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -1,5 +1,13 @@ # CHANGELOG +## NEXT_VERSION + +`NEXT_VERSION` + +### Features + +- `n-calendar` 新增 `cell` 插槽 + ## 2.43.1 `2025-09-15` diff --git a/src/calendar/demos/enUS/cell-slot.demo.vue b/src/calendar/demos/enUS/cell-slot.demo.vue new file mode 100644 index 00000000000..c8576115f46 --- /dev/null +++ b/src/calendar/demos/enUS/cell-slot.demo.vue @@ -0,0 +1,109 @@ + + # Custom Cell + + You can use the `cell` slot to customize the data to be rendered. + + + + + + + diff --git a/src/calendar/demos/enUS/index.demo-entry.md b/src/calendar/demos/enUS/index.demo-entry.md index 8e9886c5dcf..cebdd831492 100644 --- a/src/calendar/demos/enUS/index.demo-entry.md +++ b/src/calendar/demos/enUS/index.demo-entry.md @@ -8,6 +8,7 @@ How time flies. ```demo basic.vue +cell-slot.vue ``` ## API @@ -26,5 +27,6 @@ basic.vue | Name | Parameters | Description | Version | | --- | --- | --- | --- | +| cell | `(props: { date: { year: number, month: number, date: number }, data: { timestamp: number, inCurrentMonth: boolean, isCurrentDate: boolean, isSelected: boolean, day: number, isDisabled: boolean } })` | Content to be rendered in each cell. | NEXT_VERSION | | default | `({ year: number, month: number, date: number })` | Content to be rendered in each date. | | | header | `(props: { year: number, month: number })` | Header of the calendar. `month` starts from 1. | 2.29.1 | diff --git a/src/calendar/demos/zhCN/cell-slot.demo.vue b/src/calendar/demos/zhCN/cell-slot.demo.vue new file mode 100644 index 00000000000..3af3412dba1 --- /dev/null +++ b/src/calendar/demos/zhCN/cell-slot.demo.vue @@ -0,0 +1,109 @@ + + # 自定义单元格 + + 你可以使用 `cell` 插槽来自定义需要渲染的数据。 + + + + + + + diff --git a/src/calendar/demos/zhCN/index.demo-entry.md b/src/calendar/demos/zhCN/index.demo-entry.md index a7c06697659..08433a22012 100644 --- a/src/calendar/demos/zhCN/index.demo-entry.md +++ b/src/calendar/demos/zhCN/index.demo-entry.md @@ -8,6 +8,7 @@ ```demo basic.vue +cell-slot.vue ``` ## API @@ -26,5 +27,6 @@ basic.vue | 名称 | 参数 | 说明 | 版本 | | --- | --- | --- | --- | +| cell | `(props: { date: { year: number, month: number, date: number }, data: { timestamp: number, inCurrentMonth: boolean, isCurrentDate: boolean, isSelected: boolean, day: number, isDisabled: boolean } })` | 每个单元格中渲染的内容 | NEXT_VERSION | | default | `(props: { year: number, month: number, date: number })` | 每个日期中渲染的内容 | | | header | `(props: { year: number, month: number })` | 日历的标题,`month` 从 1 开始 | 2.29.1 | diff --git a/src/calendar/src/Calendar.tsx b/src/calendar/src/Calendar.tsx index d9d9168ae8e..ad907b76b2f 100644 --- a/src/calendar/src/Calendar.tsx +++ b/src/calendar/src/Calendar.tsx @@ -3,6 +3,7 @@ import type { ThemeProps } from '../../_mixins' import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils' import type { CalendarTheme } from '../styles' import type { + CalendarCellSlotProps, CalendarDefaultSlotProps, CalendarHeaderSlotProps, DateItem, @@ -47,6 +48,7 @@ export type CalendarProps = ExtractPublicPropTypes export interface CalendarSlots { default?: (props: CalendarDefaultSlotProps) => VNode[] header?: (props: CalendarHeaderSlotProps) => VNode[] + cell?: (props: CalendarCellSlotProps) => VNode[] } export default defineComponent({ @@ -327,30 +329,52 @@ export default defineComponent({ }) }} > -
-
- {date} -
- {index < 7 && ( -
- {format(ts, 'EEE', { - locale - })} -
- )} -
- {$slots.default?.({ - year, - month: month + 1, - date - })} -
+ {resolveSlotWithTypedProps( + $slots.cell, + { + date: { + year, + month: month + 1, + date + }, + data: { + timestamp: ts, + inCurrentMonth, + isCurrentDate, + isSelected: selected, + day: date, + isDisabled: disabled + } + }, + () => { + return [ +
+
+ {date} +
+ {index < 7 && ( +
+ {format(ts, 'EEE', { + locale + })} +
+ )} +
, + $slots.default?.({ + year, + month: month + 1, + date + }), +
+ ] + } + )}
) } diff --git a/src/calendar/src/interface.ts b/src/calendar/src/interface.ts index 38c88c1c554..fdb4c78ea1b 100644 --- a/src/calendar/src/interface.ts +++ b/src/calendar/src/interface.ts @@ -18,3 +18,19 @@ export interface CalendarHeaderSlotProps { year: number month: number } + +export interface CalendarCellSlotProps { + date: { + year: number + month: number + date: number + } + data: { + timestamp: number + inCurrentMonth: boolean + isCurrentDate: boolean + isSelected: boolean + day: number + isDisabled: boolean + } +}