如何修改Ant Design Vue Calendar组件的月份与星期名称？

你的问题出在locale配置结构错误以及冗余的props传递上，以下是具体修复步骤：

1. 修正Locale配置结构 #

Ant Design Vue的Calendar组件要求locale属性接收的对象需直接包含monthNames、weekdays等本地化字段，而非嵌套在lang对象中。修改你的locale文件：

// @/utils/locale.js
const locale = {
  locale: 'tm',
  // 土库曼语月份名称
  monthNames: [
    'Ýanwar',
    'Fewral',
    'Mart',
    'Aprel',
    'Maý',
    'Iýun',
    'Iýul',
    'Awgust',
    'Sentýabr',
    'Oktýabr',
    'Noýabr',
    'Dekabr'
  ],
  // 补充星期名称（否则星期仍会显示英文）
  weekdays: ['Ýekşenbe', 'Duşenbe', 'Sişenbe', 'Çarşenbe', 'Penşenbe', 'Anna', 'Şenbe'],
  // 可选：补充其他本地化文本，比如今日按钮
  today: 'Bu gün'
}

export default locale

2. 简化组件Props传递 #

去掉冗余的:monthNames属性，因为locale中已经包含该配置，同时确保传递给组件的locale是修正后的结构：

<a-calendar
  v-model:value="value"
  bordered
  class="shadow-lg rounded-lg bg-white px-4"
  :locale="calendarLocale"
>
  <template #dateCellRender="{ current }">
    <ul class="events">
      <li v-for="item in getListData(current)" :key="item.content">
        <a-badge :status="item.type" :text="item.content" />
      </li>
    </ul>
  </template>
  <template #monthCellRender="{ current }">
    <div v-if="getMonthData(current)" class="notes-month">
      <section>{{ getMonthData(current) }}</section>
      <span>Backlog number</span>
    </div>
  </template>
</a-calendar>

<script setup>
import locale from '@/utils/locale'
import { ref } from 'vue'

const value = ref()
// 直接使用修正后的locale，无需computed（除非有动态切换语言的需求）
const calendarLocale = locale
</script>

原因说明 #

• 你之前的locale配置将monthNames嵌套在lang对象下，导致Calendar组件无法正确读取到这些字段；
• 单独传递:monthNames="calendarLocale.monthNames"时，因为calendarLocale是{ lang: {...} }结构，实际calendarLocale.monthNames为undefined，自然不会生效；
• 完整的本地化需要同时配置月份、星期及其他文本，否则未配置的部分仍会显示默认英文。

内容的提问来源于stack exchange，提问作者rozumurat