Angular中FullCalendar自定义按钮获取日历对象及参数传递问题

我来帮你搞定这两个FullCalendar Angular的问题，咱们一步步拆解解决：

问题1：自定义按钮点击事件中无法访问calendarComponent #

你当前自定义按钮的click用了普通函数，导致this的指向不是组件实例，自然拿不到calendarComponent。改成箭头函数就能解决这个问题——箭头函数会继承外部的this指向，直接关联到你的AppComponent实例。

修改customButtons部分的代码：

customButtons: {
  myCustomButton: {
    text: 'Update',
    click: () => { // 替换成箭头函数
      // 现在可以正常访问calendarComponent了
      const calendarApi = this.calendarComponent.getApi();
      const eventSources = calendarApi.getEventSources();
      
      // 这里可以执行你需要的逻辑，比如遍历事件源获取事件
      eventSources.forEach(source => {
        const events = source.getEvents();
        console.log('当前日历事件:', events);
      });
      
      alert('自定义按钮点击成功，已获取到日历事件！');
    }
  }
},

问题2：切换prev/next时传递切换后的年月到GET接口 #

FullCalendar提供了datesSet回调（替代旧版本的viewRender），当视图的日期范围发生变化（比如点击prev/next切换月份）时会自动触发。我们可以在这里获取当前视图的年月，然后动态更新事件接口的参数并重新拉取数据。

首先调整calendarOptions的配置，添加datesSet回调，并把静态的events配置改成动态可更新的形式：

// 先定义一个变量保存事件源，方便后续更新
private eventSource: any;

calendarOptions: CalendarOptions = {
  // ... 保留你原有的其他配置
  datesSet: (info) => { // 监听视图日期范围变化
    // 获取当前视图的年月（取视图起始日期的年月即可）
    const currentDate = info.view.activeStart;
    this.calendarMonth = currentDate.getMonth() + 1; // 月份从0开始，+1转为实际月份
    this.calendarYear = currentDate.getFullYear();
    
    // 更新事件源的URL并重新拉取数据
    if (this.eventSource) {
      this.eventSource.url = `http://localhost:50324/api/productionforecast?month=${this.calendarMonth}&year=${this.calendarYear}`;
      this.calendarComponent.getApi().refetchEvents();
    }
  },
  events: (info, successCallback, failureCallback) => {
    // 初始化事件源
    this.eventSource = {
      url: `http://localhost:50324/api/productionforecast?month=${this.calendarMonth}&year=${this.calendarYear}`,
      method: 'GET',
      failure: () => {
        alert('there was an error while fetching events!');
        failureCallback();
      },
      color: 'yellow',
      textColor: 'black'
    };
    // 手动触发接口请求并返回给FullCalendar
    fetch(this.eventSource.url)
      .then(response => response.json())
      .then(data => successCallback(data))
      .catch(() => failureCallback());
  }
  // ... 保留你原有的其他配置
};

同时确保构造函数里的年月初始化逻辑正常：

constructor() {
  const now = new Date();
  this.calendarMonth = now.getMonth() + 1;
  this.calendarYear = now.getFullYear();
}

关键说明 #

• 箭头函数的作用：确保回调里的this始终指向组件实例，让你能顺利访问calendarComponent和组件的属性方法。
• datesSet回调的info.view.activeStart：代表当前视图的起始日期（比如月视图下就是当月第一天），用它获取年月最准确。
• refetchEvents()：更新事件源URL后，调用这个方法让FullCalendar重新加载最新的事件数据。

这样修改后，两个问题应该都能完美解决了！

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