React中FullCalendar实现Jalaali日期单月独立显示问题

问题说明 #

在React项目中使用FullCalendar搭配Jalaali（波斯历/沙姆斯历）时，日历标题默认显示两个月份（如فروردین - اردیبهشت），但需求是仅显示单个月份名称（如فروردین）。此前使用moment和moment-jalaali仅完成了语言切换，未解决标题显示问题，原代码如下：

moment.locale('fa');

<FullCalendar
  plugins={[dayGridPlugin, interactionPlugin]}
  initialView="dayGridMonth"
  dayHeaderFormat={{weekday: 'long'}}
  locale={'fa-IR'}
  firstDay={6}
/>

解决步骤 #

• 安装FullCalendar波斯历插件
  首先需要引入FullCalendar官方的波斯历处理插件，替代单纯的moment-jalaali依赖：

  npm install @fullcalendar/jalaali
  

• 修改FullCalendar配置
  引入插件后，通过titleFormat显式指定标题仅展示月份名称，同时确保波斯历插件被加载：

import { dayGridPlugin, interactionPlugin } from '@fullcalendar/core';
import jalaaliPlugin from '@fullcalendar/jalaali';

// 在组件中使用
<FullCalendar
  plugins={[dayGridPlugin, interactionPlugin, jalaaliPlugin]}
  initialView="dayGridMonth"
  dayHeaderFormat={{ weekday: 'long' }}
  locale="fa-IR"
  firstDay={6}
  titleFormat={{ month: 'long' }} // 核心配置：强制仅显示单个月份名称
/>

原理说明 #

默认情况下，FullCalendar的月视图标题会显示跨月的日期范围（比如公历月末对应波斯历下月初时，会同时显示两个月份）。通过titleFormat: { month: 'long' }可以强制标题仅渲染当前视图的主月份名称。而@fullcalendar/jalaali插件会正确处理波斯历的日期逻辑与本地化名称展示，避免仅依赖moment语言包带来的格式问题。

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