tusen-ai · jahnli · Oct 7, 2025
diff --git 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
@@ -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
@@ -0,0 +1,109 @@
+<markdown>
+  # Custom Cell
+
+  You can use the `cell` slot to customize the data to be rendered.
+      </markdown>
+
+<script lang="ts">
+import { Checkmark } from '@vicons/ionicons5'
+import { addDays, format, isYesterday } from 'date-fns'
+import { zhCN } from 'date-fns/locale'
+import { useMessage, useThemeVars } from 'naive-ui'
+import { computed, defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  components: {
+    Checkmark
+  },
+  setup() {
+    const message = useMessage()
+    const themeVars = useThemeVars()
+    const primaryColor = computed(() => themeVars.value.primaryColor)
+
+    return {
+      zhCN,
+      format,
+      primaryColor,
+      value: ref(addDays(Date.now(), 1).valueOf()),
+      handleUpdateValue(
+        _: number,
+        { year, month, date }: { year: number, month: number, date: number }
+      ) {
+        message.success(`${year}-${month}-${date}`)
+      },
+      isDateDisabled(timestamp: number) {
+        if (isYesterday(timestamp)) {
+          return true
+        }
+        return false
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <n-calendar
+    v-model:value="value"
+    :is-date-disabled="isDateDisabled"
+    @update:value="handleUpdateValue"
+  >
+    <template #cell="{ date, data }">
+      <div>
+        <div class="flex-center">
+          <span>
+            <n-avatar
+              :size="24"
+              round
+              :color="
+                data.isSelected
+                  ? primaryColor
+                  : data.isDisabled
+                    ? '#ccc'
+                    : '#959697'
+              "
+            >
+              {{ data.day }}
+            </n-avatar>
+            <n-icon
+              v-if="data.isSelected"
+              :color="primaryColor"
+              :size="24"
+              style="margin-left: 6px"
+            >
+              <Checkmark />
+            </n-icon>
+          </span>
+          <span>{{ format(data.timestamp, 'EEE', { locale: zhCN }) }}</span>
+        </div>
+        {{ date.year }} / {{ date.month }} / {{ date.date }}
+        <div v-if="data.day === 16 || data.day === 18">
+          <div class="flex-col-center">
+            <n-badge dot />
+            <span style="margin-left: 6px">High priority task</span>
+          </div>
+          <div class="flex-col-center">
+            <n-badge dot color="orange" />
+            <span style="margin-left: 6px">Medium priority task</span>
+          </div>
+          <div class="flex-col-center">
+            <n-badge dot color="#18a058" />
+            <span style="margin-left: 6px">Low priority task</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </n-calendar>
+</template>
+
+<style>
+.flex-center {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex-col-center {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git 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
@@ -0,0 +1,109 @@
+<markdown>
+  # 自定义单元格
+
+  你可以使用 `cell` 插槽来自定义需要渲染的数据。
+    </markdown>
+
+<script lang="ts">
+import { Checkmark } from '@vicons/ionicons5'
+import { addDays, format, isYesterday } from 'date-fns'
+import { zhCN } from 'date-fns/locale'
+import { useMessage, useThemeVars } from 'naive-ui'
+import { computed, defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  components: {
+    Checkmark
+  },
+  setup() {
+    const message = useMessage()
+    const themeVars = useThemeVars()
+    const primaryColor = computed(() => themeVars.value.primaryColor)
+
+    return {
+      zhCN,
+      format,
+      primaryColor,
+      value: ref(addDays(Date.now(), 1).valueOf()),
+      handleUpdateValue(
+        _: number,
+        { year, month, date }: { year: number, month: number, date: number }
+      ) {
+        message.success(`${year}-${month}-${date}`)
+      },
+      isDateDisabled(timestamp: number) {
+        if (isYesterday(timestamp)) {
+          return true
+        }
+        return false
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <n-calendar
+    v-model:value="value"
+    :is-date-disabled="isDateDisabled"
+    @update:value="handleUpdateValue"
+  >
+    <template #cell="{ date, data }">
+      <div>
+        <div class="flex-center">
+          <span>
+            <n-avatar
+              :size="24"
+              round
+              :color="
+                data.isSelected
+                  ? primaryColor
+                  : data.isDisabled
+                    ? '#ccc'
+                    : '#959697'
+              "
+            >
+              {{ data.day }}
+            </n-avatar>
+            <n-icon
+              v-if="data.isSelected"
+              :color="primaryColor"
+              :size="24"
+              style="margin-left: 6px"
+            >
+              <Checkmark />
+            </n-icon>
+          </span>
+          <span>{{ format(data.timestamp, 'EEE', { locale: zhCN }) }}</span>
+        </div>
+        {{ date.year }} / {{ date.month }} / {{ date.date }}
+        <div v-if="data.day === 16 || data.day === 18">
+          <div class="flex-col-center">
+            <n-badge dot />
+            <span style="margin-left: 6px">一件高优先级的事</span>
+          </div>
+          <div class="flex-col-center">
+            <n-badge dot color="orange" />
+            <span style="margin-left: 6px">一件中优先级的事</span>
+          </div>
+          <div class="flex-col-center">
+            <n-badge dot color="#18a058" />
+            <span style="margin-left: 6px">一件低优先级的事</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </n-calendar>
+</template>
+
+<style>
+.flex-center {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex-col-center {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git 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
@@ -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<typeof calendarProps>
 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({
                     })
                   }}
                 >
-                  <div class={`${mergedClsPrefix}-calendar-date`}>
-                    <div
-                      class={`${mergedClsPrefix}-calendar-date__date`}
-                      title={fullDate}
-                    >
-                      {date}
-                    </div>
-                    {index < 7 && (
-                      <div
-                        class={`${mergedClsPrefix}-calendar-date__day`}
-                        title={fullDate}
-                      >
-                        {format(ts, 'EEE', {
-                          locale
-                        })}
-                      </div>
-                    )}
-                  </div>
-                  {$slots.default?.({
-                    year,
-                    month: month + 1,
-                    date
-                  })}
-                  <div class={`${mergedClsPrefix}-calendar-cell__bar`} />
+                  {resolveSlotWithTypedProps(
+                    $slots.cell,
+                    {
+                      date: {
+                        year,
+                        month: month + 1,
+                        date
+                      },
+                      data: {
+                        timestamp: ts,
+                        inCurrentMonth,
+                        isCurrentDate,
+                        isSelected: selected,
+                        day: date,
+                        isDisabled: disabled
+                      }
+                    },
+                    () => {
+                      return [
+                        <div class={`${mergedClsPrefix}-calendar-date`}>
+                          <div
+                            class={`${mergedClsPrefix}-calendar-date__date`}
+                            title={fullDate}
+                          >
+                            {date}
+                          </div>
+                          {index < 7 && (
+                            <div
+                              class={`${mergedClsPrefix}-calendar-date__day`}
+                              title={fullDate}
+                            >
+                              {format(ts, 'EEE', {
+                                locale
+                              })}
+                            </div>
+                          )}
+                        </div>,
+                        $slots.default?.({
+                          year,
+                          month: month + 1,
+                          date
+                        }),
+                        <div class={`${mergedClsPrefix}-calendar-cell__bar`} />
+                      ]
+                    }
+                  )}
                 </div>
               )
             }

diff --git 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
+  }
+}