fix(calendar): doesn't call on-panel-change when date of other months is clicked, closes #3063

CHANGELOG.en-US.md

@@ -6,6 +6,7 @@
 
 - Fix `n-cascader`'s overflow count tag's popover can't scroll after `filterable` is set, closes [#3061](https://github.com/TuSimple/naive-ui/issues/3061).
 - Fix `n-drawer`'s `show-mask` prop will warn if `'transparent'` is passed.
+- Fix `n-calendar` doesn't call `on-panel-change` when date of other months is clicked, closes [#3063](https://github.com/TuSimple/naive-ui/issues/3063).
 
 ## 2.30.2
 

CHANGELOG.zh-CN.md

@@ -6,6 +6,7 @@
 
 - 修复 `n-cascader` 溢出标签的 popover 在设定 `filterable` 后无法滚动，关闭 [#3061](https://github.com/TuSimple/naive-ui/issues/3061)
 - 修复 `n-drawer` 的 `show-mask` 传入 `'transparent'` 会报 warning
+- 修复 `n-calendar` 点击不在当前月份的日期不会调用 `on-panel-change`，关闭 [#3063](https://github.com/TuSimple/naive-ui/issues/3063)
 
 ## 2.30.2
 

src/calendar/src/Calendar.tsx

@@ -293,7 +293,7 @@ export default defineComponent({
               const selected = normalizedValue === startOfDay(ts).valueOf()
               return (
                 <div
-                  key={isCurrentDate ? 'current' : index}
+                  key={`${month}-${date}`}
                   class={[
                     `${mergedClsPrefix}-calendar-cell`,
                     disabled && `${mergedClsPrefix}-calendar-cell--disabled`,
@@ -306,32 +306,28 @@ export default defineComponent({
                   ]}
                   onClick={() => {
                     if (disabled) return
+                    const monthTs = startOfMonth(ts).valueOf()
+                    this.monthTs = monthTs
+                    if (notInCurrentMonth) {
+                      this.onPanelChange?.({
+                        year: getYear(monthTs),
+                        month: getMonth(monthTs) + 1
+                      })
+                    }
                     this.doUpdateValue(ts, {
                       year,
                       month: month + 1,
                       date
                     })
-                    this.monthTs = startOfMonth(ts).valueOf()
                   }}
                 >
                   <div class={`${mergedClsPrefix}-calendar-date`}>
-                    {disabled ? (
-                      <div
-                        class={`${mergedClsPrefix}-calendar-date__date`}
-                        title={fullDate}
-                        key="disabled"
-                      >
-                        {date}
-                      </div>
-                    ) : (
-                      <div
-                        class={`${mergedClsPrefix}-calendar-date__date`}
-                        title={fullDate}
-                        key="available"
-                      >
-                        {date}
-                      </div>
-                    )}
+                    <div
+                      class={`${mergedClsPrefix}-calendar-date__date`}
+                      title={fullDate}
+                    >
+                      {date}
+                    </div>
                     {index < 7 && (
                       <div
                         class={`${mergedClsPrefix}-calendar-date__day`}
@@ -348,10 +344,7 @@ export default defineComponent({
                     month: month + 1,
                     date
                   })}
-                  <div
-                    class={`${mergedClsPrefix}-calendar-cell__bar`}
-                    key={month}
-                  />
+                  <div class={`${mergedClsPrefix}-calendar-cell__bar`} />
                 </div>
               )
             }