feat(calendar): add header slot, closes #3036

tusen-ai · Jun 1, 2022 · 32c0b37 · 32c0b37
1 parent 0c6ba02
commit 32c0b37
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 14 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -36,6 +36,7 @@
 - `n-upload` adds `is-error-state` prop, closes [#2975](https://github.com/TuSimple/naive-ui/issues/2975).
 - `n-date-picker`'s `shortcuts` prop supports readonly tuple type.
 - `n-step` adds `disabled` prop.
+- `n-calendar` adds `header` slot, closes [#3036](https://github.com/TuSimple/naive-ui/issues/3036).
 
 ## 2.29.0
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -36,6 +36,7 @@
 - `n-upload` 新增 `is-error-state` 属性，关闭 [#2975](https://github.com/TuSimple/naive-ui/issues/2975)
 - `n-date-picker` 的 `shortcuts` 属性支持 readonly tuple 类型
 - `n-step` 新增 `disabled` 属性
+- `n-calendar` 新增 `header` slot，关闭 [#3036](https://github.com/TuSimple/naive-ui/issues/3036)
 
 ## 2.29.0
 

diff --git a/src/calendar/demos/enUS/index.demo-entry.md b/src/calendar/demos/enUS/index.demo-entry.md
@@ -20,10 +20,11 @@ basic.vue
 | is-date-disabled | `(timestamp: number) => boolean` | `undefined` | Validator of the date. |  |
 | value | `number \| null` | `undefined` | Selected date's timestamp. |  |
 | on-panel-change | `(info: { year: number, month: number })` | `undefined` | Callback on panel content is changed. | 2.24.0 |
-| on-update:value | `(timestamp: number, info: { year: number, month: number, date: number }) => void` | `undefined` | Callback on date is selected. |  |
+| on-update:value | `(timestamp: number, info: { year: number, month: number, date: number }) => void` | `undefined` | Callback on date is selected. `month` starts from 1. |  |
 
 ## Calendar Slots
 
-| Name | Parameters | Description |
-| --- | --- | --- |
-| default | `({ year: number, month: number, date: number })` | Content to be rendered in each date. |
+| Name | Parameters | Description | 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. | NEXT_VERSION |
diff --git a/src/calendar/demos/zhCN/index.demo-entry.md b/src/calendar/demos/zhCN/index.demo-entry.md
@@ -20,10 +20,11 @@ basic.vue
 | is-date-disabled | `(timestamp: number) => boolean` | `undefined` | 日期禁用的校验函数 |  |
 | value | `number \| null` | `undefined` | 被选中的日期的时间戳 |  |
 | on-panel-change | `(info: { year: number, month: number })` | `undefined` | 面板内容切换的回调 | 2.24.0 |
-| on-update:value | `(timestamp: number, info: { year: number, month: number, date: number }) => void` | `undefined` | 选中日期的回调 |  |
+| on-update:value | `(timestamp: number, info: { year: number, month: number, date: number }) => void` | `undefined` | 选中日期的回调，`month` 从 1 开始 |  |
 
 ### Calendar Slots
 
-| 名称 | 参数 | 说明 |
-| --- | --- | --- |
-| default | `({ year: number, month: number, date: number })` | 每个日期中渲染的内容 |
+| 名称 | 参数 | 说明 | 版本 |
+| --- | --- | --- | --- |
+| default | `(props: { year: number, month: number, date: number })` | 每个日期中渲染的内容 |  |
+| header | `(props: { year: number, month: number })` | 日历的标题，`month` 从 1 开始 | NEXT_VERSION |
diff --git a/src/calendar/src/Calendar.tsx b/src/calendar/src/Calendar.tsx
@@ -20,7 +20,7 @@ import { useMergedState } from 'vooks'
 import { dateArray } from '../../date-picker/src/utils'
 import { ChevronLeftIcon, ChevronRightIcon } from '../../_internal/icons'
 import { NBaseIcon } from '../../_internal'
-import { call } from '../../_utils'
+import { call, resolveSlotWithProps } from '../../_utils'
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
 import { NButton } from '../../button'
 import { NButtonGroup } from '../../button-group'
@@ -208,18 +208,27 @@ export default defineComponent({
     } = this
     onRender?.()
     const normalizedValue = mergedValue && startOfDay(mergedValue).valueOf()
-    const localeMonth = format(monthTs, 'MMMM', { locale })
     const year = getYear(monthTs)
-    const title = monthBeforeYear
-      ? `${localeMonth} ${year}`
-      : `${year} ${localeMonth}`
     return (
       <div
         class={[`${mergedClsPrefix}-calendar`, this.themeClass]}
         style={cssVars as CSSProperties}
       >
         <div class={`${mergedClsPrefix}-calendar-header`}>
-          <div class={`${mergedClsPrefix}-calendar-header__title`}>{title}</div>
+          <div class={`${mergedClsPrefix}-calendar-header__title`}>
+            {resolveSlotWithProps(
+              $slots.header,
+              { year, month: getMonth(monthTs) + 1 },
+              () => {
+                const localeMonth = format(monthTs, 'MMMM', { locale })
+                return [
+                  monthBeforeYear
+                    ? `${localeMonth} ${year}`
+                    : `${year} ${localeMonth}`
+                ]
+              }
+            )}
+          </div>
           <div class={`${mergedClsPrefix}-calendar-header__extra`}>
             <NButtonGroup>
               {{