React中FullCalendar的headerToolbar按钮文字大写实现方法咨询

方法1：CSS强制转换文本大小写 #

FullCalendar的工具栏按钮自带特定类名，直接用CSS的text-transform属性就能强制转大写，不用修改组件配置，是最快捷的方案：

/* 批量处理所有工具栏按钮 */
.fc-header-toolbar .fc-button {
  text-transform: uppercase;
}

/* 或者精准指定目标按钮（可选） */
.fc-today-button, .fc-dayGridMonth-button, .fc-timeGridWeek-button, .fc-timeGridDay-button {
  text-transform: uppercase;
}

方法2：自定义按钮文本（通过配置实现） #

如果需要完全自定义按钮文字，可将默认按钮替换为自定义按钮，手动指定大写文本并绑定原有功能：

import { useRef } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';

function CalendarComponent() {
  const calendarRef = useRef(null);

  return (
    <FullCalendar
      plugins={[dayGridPlugin, timeGridPlugin]}
      headerToolbar={{
        start: "customToday prev,next",
        center: "TITLE",
        end: "customMonth,customWeek,customDay",
      }}
      customButtons={{
        customToday: {
          text: 'TODAY',
          click: () => calendarRef.current.getApi().today()
        },
        customMonth: {
          text: 'MONTH',
          click: () => calendarRef.current.getApi().changeView('dayGridMonth')
        },
        customWeek: {
          text: 'WEEK',
          click: () => calendarRef.current.getApi().changeView('timeGridWeek')
        },
        customDay: {
          text: 'DAY',
          click: () => calendarRef.current.getApi().changeView('timeGridDay')
        }
      }}
      ref={calendarRef}
    />
  );
}

注意需要给FullCalendar添加ref，才能调用日历实例的内置方法。

方法3：通过Locale自定义语言文本 #

如果项目用到多语言配置，可以直接覆盖默认locale的按钮文本：

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import { enUS } from '@fullcalendar/core/locales';

// 复制默认英文locale，修改目标文本
const customLocale = {
  ...enUS,
  buttonText: {
    today: 'TODAY',
    month: 'MONTH',
    week: 'WEEK',
    day: 'DAY'
  }
};

function CalendarComponent() {
  return (
    <FullCalendar
      plugins={[dayGridPlugin, timeGridPlugin]}
      locale={customLocale}
      headerToolbar={{
        start: "today prev,next",
        center: "TITLE",
        end: "dayGridMonth,timeGridWeek,timeGridDay",
      }}
    />
  );
}

内容的提问来源于stack exchange，提问作者Sumanth G S