Angular中FullCalendar月视图日期格式修改问题

我刚好踩过FullCalendar 4.x版本的这个配置坑，针对你要把月视图单元格日期从dd改成mm/dd（比如5/19）的需求，给你两个可行方案，推荐用第一种：

方案一：使用dayCellContent回调函数（最直接可控） #

FullCalendar 4.x系列确实没有专门的配置项直接修改单元格内的日期格式（后续版本才新增了dayCellFormat），但可以通过dayCellContent回调来自定义单元格内容。结合你已经引入的@fullcalendar/moment或者原生Date API都能实现：

代码示例（Angular组件内） #

import { CalendarOptions } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import momentPlugin from '@fullcalendar/moment';
// 如果用原生API不需要moment，不过你已经引入了可以直接用

export class YourCalendarComponent {
  calendarOptions: CalendarOptions = {
    plugins: [dayGridPlugin, momentPlugin],
    initialView: 'dayGridMonth',
    // 自定义日期单元格内容
    dayCellContent: (info) => {
      // 方式1：用moment格式化（因为你已经引入了moment插件）
      const formattedDate = moment(info.date).format('M/D');
      
      // 方式2：用原生Date API格式化，无需依赖moment
      // const formattedDate = info.date.toLocaleDateString('en-US', {
      //   month: 'numeric',
      //   day: 'numeric'
      // });

      // 返回自定义的HTML内容，保留原有样式类避免布局错乱
      return { html: `<div class="fc-day-number">${formattedDate}</div>` };
    }
  };
}

说明 #

• info.date是当前单元格对应的Date对象，你可以根据需求灵活调整格式字符串（比如想显示成带前导零的MM/DD就用'MM/DD'）
• 返回的html会替换默认的日期显示元素，保留fc-day-number类名可以沿用FullCalendar原有样式，避免自定义内容出现布局问题

方案二：通过CSS隐藏默认日期+伪元素注入（不推荐） #

如果不想修改JS逻辑，也可以用CSS隐藏默认的日期数字，再配合JS给元素注入格式化后的日期属性，最后用伪元素显示，但这种方式灵活性差，仅作参考：

/* 隐藏默认日期 */
.fc-day-number {
  visibility: hidden;
  position: relative;
}

/* 用伪元素显示自定义日期 */
.fc-day-number::after {
  content: attr(data-formatted-date);
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
}

需要额外在dayCellContent或者viewRender回调里给每个日期单元格添加data-formatted-date属性，整体复杂度比方案一高，不推荐使用。

最后别忘了在Angular模板里正确引入FullCalendar组件：

<full-calendar [options]="calendarOptions"></full-calendar>

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