如何为FullCalendar中每个切换的月份设置不同背景

我来给你两个靠谱的方案，都能实现切换月份自动换背景的需求，你可以根据自己的情况选择：

方案一：用FullCalendar内置事件（推荐，更稳定） #

这是官方推荐的做法，不用依赖页面上的标题元素，直接通过FullCalendar的事件监听来响应月份切换，兼容性和稳定性都更好。

如果能修改FullCalendar的初始化代码，你可以在配置里加上datesSet事件（FullCalendar v5+支持），每次日期范围变化（比如切换月份）时自动更新背景：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 这里保留你原有的FullCalendar配置项
    // ...
    datesSet: function(info) {
      // 获取当前月份的数字（注意JS里月份从0开始，所以要+1）
      const monthNum = info.view.currentStart.getMonth() + 1;
      // 生成背景图文件名，比如1月对应month01.png，2月对应month02.png
      const bgImgPath = `assets/images/pgs/month${monthNum.toString().padStart(2, '0')}.png`;
      // 给日历容器设置背景
      calendarEl.style.backgroundImage = `url('${bgImgPath}')`;
    }
  });
  calendar.render();
});

这个方法的好处是，完全不依赖页面上的HTML结构变化，哪怕FullCalendar更新后调整了标题的类名，也不会影响功能。

方案二：独立脚本监听标题变化（无需修改原有FullCalendar代码） #

如果不想改动原有的FullCalendar初始化代码，你可以用MutationObserver来监听页面上的月份标题变化，然后动态修改背景。这种方法适合想快速加个独立脚本的场景：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  
  // 延迟一小段时间，确保FullCalendar已经渲染出标题元素
  setTimeout(() => {
    const titleEl = document.querySelector('.fc-toolbar-title');
    if (!titleEl) return;

    // 定义月份和背景图的映射关系，你可以根据自己的文件名调整
    const monthBgMap = {
      'January': 'month01.png',
      'February': 'month02.png',
      'March': 'month03.png',
      'April': 'month04.png',
      'May': 'month05.png',
      'June': 'month06.png',
      'July': 'month07.png',
      'August': 'month08.png',
      'September': 'month09.png',
      'October': 'month10.png',
      'November': 'month11.png',
      'December': 'month12.png'
    };

    // 更新背景图的函数
    function updateCalendarBg(titleText) {
      // 从标题里提取月份（比如"January 2024"取前面的"January"）
      const currentMonth = titleText.split(' ')[0];
      const bgFileName = monthBgMap[currentMonth];
      if (bgFileName) {
        calendarEl.style.backgroundImage = `url('assets/images/pgs/${bgFileName}')`;
      }
    }

    // 页面加载完成后先设置一次初始背景
    updateCalendarBg(titleEl.textContent);

    // 创建观察者，监听标题内容的变化
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(() => {
        updateCalendarBg(titleEl.textContent);
      });
    });

    // 配置观察者，监听标题的文本内容变化
    observer.observe(titleEl, {
      childList: true,
      subtree: true,
      characterData: true
    });
  }, 100);
});

把这段代码直接加到你的HTML页面里就行，它会自动监听月份切换，然后替换对应的背景图。

小提示 #

如果你的背景图命名是按月份数字统一规则（比如month01.png到month12.png），方案一里的自动生成文件名的方式会更省心，不用手动维护月份映射表~

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