Angular FullCalendar 头部日期格式错误，如何修改为dd/mm格式？

FullCalendar 5+ 版本可通过新增dayHeaderFormat、titleFormat两个配置项修改日期展示规则，适配dd/mm的显示需求，修改后的配置如下：

this.calendarOptions = {
  plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin],
  initialView: 'timeGridWeek',
  headerToolbar: {
    left: 'prev,next', 
    center: 'title', 
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  firstDay: 1,
  // 配置周/日视图头部日期列显示格式为 日/月
  dayHeaderFormat: (dateInfo) => {
    const day = String(dateInfo.date.getDate()).padStart(2, '0');
    const month = String(dateInfo.date.getMonth() + 1).padStart(2, '0');
    return `${day}/${month}`;
  },
  // 配置顶部中心标题区域的日期显示格式
  titleFormat: (dateInfo) => {
    const day = String(dateInfo.date.getDate()).padStart(2, '0');
    const month = String(dateInfo.date.getMonth() + 1).padStart(2, '0');
    const year = dateInfo.date.getFullYear();
    return `${day}/${month}/${year}`;
  }
};

补充说明 #

• 若使用FullCalendar 4及更低版本，将dayHeaderFormat替换为columnHeaderFormat即可，配置规则完全一致
• 如需针对特定视图单独配置格式，可通过views参数单独定义，示例如下：

views: {
  // 仅修改周视图的头部日期格式
  timeGridWeek: {
    dayHeaderFormat: (dateInfo) => {
      const day = String(dateInfo.date.getDate()).padStart(2, '0');
      const month = String(dateInfo.date.getMonth() + 1).padStart(2, '0');
      return `${day}/${month}`;
    }
  }
}

• 若不需要日期前导零，删除padStart(2, '0')逻辑即可
• 若无需强制拼接顺序，也可直接使用Intl格式对象配置，示例：dayHeaderFormat: {day: '2-digit', month: '2-digit'}，该配置的展示顺序会跟随项目全局locale设置变化

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