FullCalendar自定义波斯历月视图部分月份布局异常求助

问题描述 #

在Angular 19项目中使用FullCalendar v6.1.17，结合visibleRange与jalali-moment实现自定义波斯历（Jalali）月视图。日历整体功能可用，但部分月份出现布局异常：原本的6行月视图变为基于列的布局，仿佛日期范围不被识别为标准日历月。

异常规律 #

✅ 正常显示场景 #

当visibleRange的start与end日期的公历日部分相同时，可正常显示对应波斯历月份，例如：

• start: 2025-05-22，end: 2025-06-22 → 正确显示Khordad月
• start: 2025-03-21，end: 2025-04-21 → 正确显示Farvardin月
• start: 2024-09-22，end: 2024-10-22 → 正确显示Mehr月

❌ 布局崩溃场景 #

当start与end的日部分不同时，布局崩溃，例如：

• start: 2025-04-21，end: 2025-05-22 → Ordibehesht月布局异常
• start: 2024-10-22，end: 2024-11-21 → Aban月布局异常

推测FullCalendar内部逻辑基于公历月的固定周数渲染网格，当起止日期日部分不匹配时，会增减周数导致布局偏移，引发额外行出现/消失、dayGrid切换为列模式等问题。

已尝试但未解决的方案 #

• 使用visibleRange定义波斯历月的精确起止日期
• 验证日期范围覆盖完整月份
• 对齐起止日期的公历日部分（仅部分月份有效）
• 手动控制contentHeight、dayMaxEventRows及CSS调整

期望实现 #

• 无论起止日期如何对齐，始终保持固定6行月视图布局
• 波斯历月未与公历网格对齐时，仍按标准日历月渲染而非列布局

代码示例 #

组件配置 #

calendarOptions: CalendarOptions = {
  plugins: [dayGridPlugin, interactionPlugin],
  initialView: 'dayGrid',
  locale: 'fa',
  direction: 'rtl',
  firstDay: 6,
  weekNumbers: true,
  contentHeight: 368,

  visibleRange: {
    start: '2025-04-21',
    end: '2025-05-21' // 正确显示Ordibehesht月布局，但最后一天（31号）灰显
  },

  dayCellContent: (arg) => {
    const gDay = arg.dayNumberText;
    const jDay = moment(arg.date).format('D');
    return {
      html: `<div>${gDay}</div><div style="font-size:0.75em;color:#555;">${jDay}</div>`
    };
  },

  dayHeaderContent: (arg) => {
    const fa = new Intl.DateTimeFormat('fa-IR-u-ca-persian', {
      weekday: 'long',
    }).format(arg.date);

    const en = new Intl.DateTimeFormat('en-US', {
      weekday: 'short',
    }).format(arg.date);

    return {
      html: `
        <div style="text-align: center">
          <div>${fa}</div>
          <div style="font-size: 0.75em; color: gray">${en}</div>
        </div>
      `
    };
  },
};

若设置visibleRange: {start: '2025-04-21', end: '2025-05-22'}（覆盖完整波斯历月），则布局崩溃为垂直/列视图。

动态计算波斯历月起止方法 #

getVisibleRangeForJalaliMonth(currentDateInfo: any) {
  const currentMoment = moment(currentDateInfo.start);
  const startOfJalaliMonth = currentMoment.clone().startOf('jMonth');
  const startOfNextJalaliMonth = startOfJalaliMonth.clone().add(1, 'jMonth');

  return {
    start: startOfJalaliMonth.toDate(),
    end: startOfNextJalaliMonth.toDate(),
  };
}

使用方式：visibleRange: this.getVisibleRangeForJalaliMonth.bind(this)

求助问题 #

1. 能否强制FullCalendar在自定义月视图中始终使用固定网格布局？
2. 如何避免起止日期差1天时的布局切换？
3. 是否有已知的解决方案（如CSS、伪事件、自定义渲染）来确保波斯历等非公历的月视图显示一致？

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