Angular 5中ng-fullcalendar标题显示undefinedundefined问题求助

我之前也碰到过这个完全一样的坑！结合你的依赖版本和代码来看，问题根源主要是moment版本不兼容，再加上配置初始化时机的小问题，下面给你一步步的解决方案：

1. 锁定moment的兼容版本 #

FullCalendar 3.6.1对moment的版本有严格要求，你用latest版本的moment（比如2.29.x及以上）会和旧版FullCalendar出现日期解析冲突，直接导致标题栏的年月显示成undefinedundefined。

解决方法：

• 修改package.json中的moment版本为兼容的稳定版：

  "moment": "^2.24.0"
  

• 执行命令重新安装依赖：

  npm install
  

  或者直接安装指定版本：

  npm install moment@2.24.0 --save
  

2. 调整CalendarOptions的初始化逻辑 #

你当前在API请求的subscribe回调里重新赋值整个calendarOptions，可能会因为Angular 5的变更检测机制没及时捕捉到配置变化，导致日历渲染异常。建议先初始化基础配置，再单独更新events数据：

修改fullcalendar.component.ts代码：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import * as moment from 'moment'; // 确保导入moment

@Component({
  selector: 'app-fullcalendar',
  templateUrl: './fullcalendar.component.html'
})
export class FullcalendarComponent implements OnInit {
  calendarOptions: any;
  events: any[];

  constructor(
    private valuationService: ValuationService,
    private cdr: ChangeDetectorRef // 可选，用于手动触发变更检测
  ) {}

  ngOnInit() {
    // 先初始化日历基础配置，放在subscribe外面
    this.calendarOptions = { 
      editable: true, 
      height: 'auto', 
      eventLimit: false, 
      header: { 
        center: 'title', 
        left: 'prev,today,next', 
        right: 'month,agendaWeek,agendaDay' 
      }, 
      events: [] 
    };

    // 再请求事件数据并更新events
    this.valuationService.getEvents().subscribe(data => { 
      this.events = data;
      // 直接更新calendarOptions的events属性，而非重新赋值整个对象
      this.calendarOptions.events = data;
      
      // 如果Angular变更检测没自动触发，手动调用（Angular 5有时需要）
      this.cdr.detectChanges();
    });
  }

  eventClick(eventDetail: any) {
    // 你的点击事件逻辑
  }
}

3. 确认样式和依赖导入正确 #

确保在angular-cli.json（Angular 5的配置文件）的styles数组中导入了FullCalendar的样式：

"styles": [
  "styles.css",
  "../node_modules/fullcalendar/dist/fullcalendar.min.css"
]

为什么修改node_modules的方法不可取？ #

你提到的修改fullcalendar.min.js的临时方案确实能解决问题，但每次执行npm install都会覆盖修改的内容，维护成本极高，上面的版本锁定+代码调整才是根本解决办法。

按照这几步操作后，日历标题的undefinedundefined问题应该就能彻底解决了！

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