Angular中FullCalendar获取激活月日年及起始日期修正需求

你遇到的问题是因为FullCalendar的月视图默认会包含前后月份的部分日期（比如9月视图会显示8月底的几天），所以events回调里的fetchInfo.startStr是视图显示的起始日期，而非当月第一天。要拿到当前激活月份的首日，推荐用**datesSet事件**，它会在视图日期范围变化时触发（包括点击上一页/下一页按钮）。

实现步骤： #

1. 在FullCalendar初始化时配置datesSet回调函数
2. 从回调参数中直接获取或处理出当月第一天

最简代码示例： #

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    // 监听日期范围切换事件
    datesSet: function(info) {
      // info.currentStart 就是当前激活月份的首日日期对象
      var firstDay = info.currentStart;
      // 格式化为你需要的字符串格式
      var formattedDate = firstDay.getFullYear() + '年' + 
                          String(firstDay.getMonth() + 1).padStart(2, '0') + '月' + 
                          String(firstDay.getDate()).padStart(2, '0') + '日';
      
      console.log('当前激活月份首日：', formattedDate);
      // 此处可将日期用于你的业务逻辑
    },
    events: function(fetchInfo, successCallback, failureCallback) {
      // 保留原有的事件加载逻辑
      successCallback([]);
    }
  });

  calendar.render();
});

补充说明： #

• datesSet的info参数里，currentStart是FullCalendar内置的当前激活周期起始值，月视图下就是当月第一天，无需手动计算，准确性更高。
• 如果你需要手动处理日期（比如兼容旧版本或自定义场景），可以用原生Date对象：

  var viewStart = info.start;
  var firstDayOfMonth = new Date(viewStart.getFullYear(), viewStart.getMonth(), 1);
  

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