FullCalendar如何根据当前浏览的月份自动切换背景颜色

嗨，看起来你已经把月份对应颜色的逻辑搭得挺顺了——初始加载、改系统时间都能正确变色，唯独切换月份视图时背景色没跟上，这个坑我之前也踩过！问题就出在你现在只在页面加载时用系统时间更新了一次背景，切换视图时完全没触发更新逻辑，咱们来把这个补上～

先理清楚核心问题：

• 你现有的updateBackground函数没问题，颜色映射也完全正确
• 但目前只有页面加载时（那个延迟100ms的setTimeout）调用了它，而且用的是系统当前时间，不是FullCalendar当前视图显示的月份
• FullCalendar其实给我们准备了完美的钩子：datesSet回调，它会在初始加载视图、切换月份/年份、改变视图范围时自动触发，刚好用来更新背景色

接下来直接上修改方案，我会在代码里标注改动的地方：

修改后的完整代码 #

<script>
  $(document).ready(function() {
    var monthColors = [
            "#FF5733",   // January - Red-Orange
            "#33B5E5",   // February - Blue
            "#A569BD",   // March - Purple
            "#58D68D",   // April - Green
            "#F4D03F",   // May - Yellow
            "#FF8C00",   // June - Orange
            "#4682B4",   // July - Steel Blue
            "#DC143C",   // August - Crimson
            "#20B2AA",   // September - Light Sea Green
            "#FF6347",   // October - Tomato
            "#2E8B57",  // November - Sea Green
            "#B22222"   // December - Fire Brick
        ];       
        function updateBackground(date) {
            var month = date.getMonth(); // Get displayed month
            console.log("Updating background for month:", month + 1); // Debugging log
            $("body").css("background-color", monthColors[month]);
        }

  $('#calendar').fullCalendar(
    {
      header:
      {
        left: '',
        center: 'title'
      },
      events:
      [
        {
          title: 'Marriage',
          start: '2025-03-17',
          color: 'transparent',
          textColor: 'black',
          imageurl: 'birthday.png'
          },
          {
          title: 'Marriage',
          start: '2025-03-19',
          end: '2025-03-20',
          color: '#8E9A75',
          textColor: 'white',
          imageurl: 'birthday.png'
          }
      ],
      eventRender: function(event, eventElement) {
      if (event.imageurl) {
        eventElement.prepend("<img src='" + event.imageurl + "' width='80' height='80' >");
      }  
      return ['all', event.tags].indexOf($('#event_selector option:selected').val()) >= 0;
      },
      datesSet: function(info) {
          // 修改：获取当前视图的起始日期，提取月份
          var currentViewDate = info.start;
          updateBackground(currentViewDate); // 触发背景色更新
          console.log("Currently viewed month:", currentViewDate.getMonth() + 1);
      },
  }); 

  // 移除：不需要这个延迟的setTimeout了，datesSet在初始化时会自动触发一次
  // setTimeout(function() {
  //   updateBackground(new Date());
  // }, 100);

});
</script>

关键修改点说明 #

1. 利用datesSet回调触发更新：
   这个回调是FullCalendar专门用来通知你“视图的日期范围变了”的，不管是初始加载还是切换月份，它都会跑一遍。我们通过info.start拿到当前视图的起始日期，把这个日期传给updateBackground，就能获取到当前视图显示的月份了。

2. 移除冗余的setTimeout：
   原来的延迟100ms调用完全没必要，因为datesSet在日历初始化完成时就会自动触发一次，刚好帮我们设置初始的背景色，和你之前改系统时间的逻辑也不冲突。

3. 修复未定义的calendar变量：
   你原来的datesSet里用了calendar.getDate()，但代码里根本没定义calendar变量（打开浏览器控制台应该能看到报错），换成info.start就没问题了。

现在你再切换月份试试，背景色应该会跟着视图同步变化啦！就像你改系统时间时的效果一样，但这次不用改系统时间，点切换按钮就生效～

初始加载正确效果：

问题场景（修复前）：

改系统时间的验证效果（逻辑依然有效）：

备注：内容来源于stack exchange，提问作者Ryan Shupe