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. + + + + + + + + + + + + {{ data.day }} + + + + + + {{ format(data.timestamp, 'EEE', { locale: zhCN }) }} + + {{ date.year }} / {{ date.month }} / {{ date.date }} + + + + High priority task + + + + Medium priority task + + + + Low priority task + + + + + + + + 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` 插槽来自定义需要渲染的数据。 + + + + + + + + + + + + {{ data.day }} + + + + + + {{ format(data.timestamp, 'EEE', { locale: zhCN }) }} + + {{ date.year }} / {{ date.month }} / {{ date.date }} + + + + 一件高优先级的事 + + + + 一件中优先级的事 + + + + 一件低优先级的事 + + + + + + + + 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 + } +}