From 32c0b3741e3c2072ba91ddf6f372217019927279 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Wed, 1 Jun 2022 23:19:06 +0800
Subject: [PATCH] feat(calendar): add header slot, closes #3036

---
 CHANGELOG.en-US.md                          |  1 +
 CHANGELOG.zh-CN.md                          |  1 +
 src/calendar/demos/enUS/index.demo-entry.md |  9 +++++----
 src/calendar/demos/zhCN/index.demo-entry.md |  9 +++++----
 src/calendar/src/Calendar.tsx               | 21 +++++++++++++++------
 5 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 8daea9d6d8d..01da2d6f492 100644
--- 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
index c90dd49afb2..a07b0ad36c9 100644
--- 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
index 234b60f9146..c21d1dfece5 100644
--- 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
index e907debfa97..ba9c014ea1e 100644
--- 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
index f71241e766e..ca614f31efa 100644
--- 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>
               {{