feat(calendar): add on-panel-change prop, closes #2082

tusen-ai · Jan 3, 2022 · ad46174 · tarekabiramia · Apr 5, 2024 · ad46174
1 parent 44a2c45
commit ad46174
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 16 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -9,6 +9,7 @@
 - `n-drawer` adds wai-aria support.
 - `n-message-provider` adds `render-message` prop.
 - `n-data-table` `TableColumn` supports `string` typed `width`, closes [#2102](https://github.com/TuSimple/naive-ui/issues/2102).
+- `n-calendar` adds `on-panel-change` props, closes [#2082](https://github.com/TuSimple/naive-ui/issues/2082).
 
 ## 2.23.2 (2021-12-29)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -9,6 +9,7 @@
 - `n-drawer` 新增 wai-aria 支持
 - `n-message-provider` 新增 `render-message` 属性
 - `n-data-table` `TableColumn` 支持 `string` 类型的 `width`，关闭 [#2102](https://github.com/TuSimple/naive-ui/issues/2102)
+- `n-calendar` 新增 `on-panel-change` 属性，关闭 [#2082](https://github.com/TuSimple/naive-ui/issues/2082)
 
 ## 2.23.2 (2021-12-29)
 

diff --git a/src/calendar/demos/enUS/index.demo-entry.md b/src/calendar/demos/enUS/index.demo-entry.md
@@ -14,12 +14,13 @@ basic
 
 ### Calendar Props
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| default-value | `number` | `null` | Default selected date's timestamp. |
-| is-date-disabled | `(timestamp: number) => boolean` | `undefined` | Validator of the date. |
-| value | `number \| null` | `undefined` | Selected date's timestamp. |
-| on-update:value | `(timestamp: number, { year: number, month: number, date: number }) => void` | `undefined` | Callback when date is selected. |
+| Name | Type | Default | Description | Version |
+| --- | --- | --- | --- | --- |
+| default-value | `number` | `null` | Default selected date's timestamp. |  |
+| 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. | NEXT_VERSION |
+| on-update:value | `(timestamp: number, info: { year: number, month: number, date: number }) => void` | `undefined` | Callback on date is selected. |  |
 
 ## Calendar Slots
 

diff --git a/src/calendar/demos/zhCN/index.demo-entry.md b/src/calendar/demos/zhCN/index.demo-entry.md
@@ -14,12 +14,13 @@ basic
 
 ### Calendar Props
 
-| 名称 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| default-value | `number` | `null` | 默认被选中的日期的时间戳 |
-| is-date-disabled | `(timestamp: number) => boolean` | `undefined` | 日期禁用的校验函数 |
-| value | `number \| null` | `undefined` | 被选中的日期的时间戳 |
-| on-update:value | `(timestamp: number, { year: number, month: number, date: number }) => void` | `undefined` | 选中日期的回调 |
+| 名称 | 类型 | 默认值 | 说明 | 版本 |
+| --- | --- | --- | --- | --- |
+| default-value | `number` | `null` | 默认被选中的日期的时间戳 |  |
+| is-date-disabled | `(timestamp: number) => boolean` | `undefined` | 日期禁用的校验函数 |  |
+| value | `number \| null` | `undefined` | 被选中的日期的时间戳 |  |
+| on-panel-change | `(info: { year: number, month: number })` | `undefined` | 面板内容切换的回调 | NEXT_VERSION |
+| on-update:value | `(timestamp: number, info: { year: number, month: number, date: number }) => void` | `undefined` | 选中日期的回调 |  |
 
 ### Calendar Slots
 

diff --git a/src/calendar/src/Calendar.tsx b/src/calendar/src/Calendar.tsx
@@ -8,7 +8,14 @@ import {
   Fragment,
   toRef
 } from 'vue'
-import { format, getYear, addMonths, startOfDay, startOfMonth } from 'date-fns'
+import {
+  format,
+  getYear,
+  addMonths,
+  startOfDay,
+  startOfMonth,
+  getMonth
+} from 'date-fns'
 import { useMergedState } from 'vooks'
 import { dateArray } from '../../date-picker/src/utils'
 import { ChevronLeftIcon, ChevronRightIcon } from '../../_internal/icons'
@@ -20,7 +27,7 @@ import { useConfig, useLocale, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { calendarLight } from '../styles'
 import type { CalendarTheme } from '../styles'
-import type { OnUpdateValue, DateItem } from './interface'
+import type { OnUpdateValue, DateItem, OnPanelChange } from './interface'
 import style from './styles/index.cssr'
 
 const calendarProps = {
@@ -31,6 +38,7 @@ const calendarProps = {
     type: Number as PropType<number | null>,
     defualt: null
   },
+  onPanelChange: Function as PropType<OnPanelChange>,
   'onUpdate:value': [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
   onUpdateValue: [Function, Array] as PropType<MaybeArray<OnUpdateValue>>
 } as const
@@ -72,10 +80,20 @@ export default defineComponent({
     }
 
     function handlePrevClick (): void {
-      monthTsRef.value = addMonths(monthTsRef.value, -1).valueOf()
+      const monthTs = addMonths(monthTsRef.value, -1).valueOf()
+      monthTsRef.value = monthTs
+      props.onPanelChange?.({
+        year: getYear(monthTs),
+        month: getMonth(monthTs) + 1
+      })
     }
     function handleNextClick (): void {
-      monthTsRef.value = addMonths(monthTsRef.value, 1).valueOf()
+      const monthTs = addMonths(monthTsRef.value, 1).valueOf()
+      monthTsRef.value = monthTs
+      props.onPanelChange?.({
+        year: getYear(monthTs),
+        month: getMonth(monthTs) + 1
+      })
     }
     function handleTodayClick (): void {
       monthTsRef.value = startOfMonth(now).valueOf()

diff --git a/src/calendar/src/interface.ts b/src/calendar/src/interface.ts
@@ -5,3 +5,5 @@ export interface DateItem {
   month: number
   date: number
 }
+
+export type OnPanelChange = (info: { year: number, month: number }) => void