如何在ReactCalendar的month视图下将月份首字母大写

要让ReactCalendar顶部的月份名首字母大写（比如将noviembre改为Noviembre），可以利用组件提供的formatMonthYear属性自定义标题格式，覆盖默认的locale输出。

具体实现步骤 #

在你的ReactCalendar组件中添加formatMonthYear prop，通过原生Date API或你已使用的dayjs来处理月份名的大小写：

方法1：使用原生Date API

<ReactCalendar 
  className="h-auto w-full py-6 px-4" 
  value={dateValue} 
  maxDate={dayjs().add(90, 'days').toDate()} 
  next2Label={null} 
  locale='es-ES' 
  formatShortWeekday={(locale, dateValue) => ['D', 'L', 'M', 'M', 'J', 'V', 'S'][dateValue.getDay()]} 
  prev2Label={null} 
  view="month" 
  minDate={dayjs().toDate()} 
  tileDisabled={date => disabledDays(date.date.toString().toLowerCase())} 
  tileContent={({ date }) => handleTileContent(date)} 
  onClickDay={date => setDateValue(date)}
  // 自定义月份年份格式
  formatMonthYear={(locale, date) => {
    const monthName = date.toLocaleString('es-ES', { month: 'long' });
    return `${monthName.charAt(0).toUpperCase()}${monthName.slice(1)} ${date.getFullYear()}`;
  }}
/>

方法2：结合dayjs（适配你已使用的库）

<ReactCalendar 
  className="h-auto w-full py-6 px-4" 
  value={dateValue} 
  maxDate={dayjs().add(90, 'days').toDate()} 
  next2Label={null} 
  locale='es-ES' 
  formatShortWeekday={(locale, dateValue) => ['D', 'L', 'M', 'M', 'J', 'V', 'S'][dateValue.getDay()]} 
  prev2Label={null} 
  view="month" 
  minDate={dayjs().toDate()} 
  tileDisabled={date => disabledDays(date.date.toString().toLowerCase())} 
  tileContent={({ date }) => handleTileContent(date)} 
  onClickDay={date => setDateValue(date)}
  // 自定义月份年份格式
  formatMonthYear={(locale, date) => {
    const monthYear = dayjs(date).locale('es').format('MMMM YYYY');
    return monthYear.charAt(0).toUpperCase() + monthYear.slice(1);
  }}
/>

原理说明 #

formatMonthYear是ReactCalendar的内置属性，允许你完全自定义日历顶部的月份年份标题内容。通过该属性，我们可以获取当前显示的月份日期，提取月份名后将首字母转为大写，再拼接年份即可实现需求。

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