如何为FullCalendar资源时间线视图设置年份+季度两行标题？

你遇到的问题是数组形式的slotLabelFormat配置中自定义季度的函数未被调用，这是因为FullCalendar的该配置不支持custom字段，正确的做法有两种：

方法一：使用formatter函数（推荐） #

在slotLabelFormat的数组元素中，通过formatter属性传入自定义函数来生成对应行的内容，这是符合FullCalendar API规范的用法：

resource5YearsSlide: {
    type: 'resourceTimeline',
    buttonText: '5 Years',
    dateIncrement: { year: 1 },
    slotDuration: { month: 3 },
    slotLabelInterval: { month: 3 },
    // 修改后的slotLabelFormat配置
    slotLabelFormat: [
      { year: 'numeric' },
      {
        formatter: function(arg) {
          const date = new Date(arg.date.marker);
          const month = date.getMonth();
          const quarter = Math.floor(month / 3) + 1;
          return 'T' + quarter;
        }
      }
    ],
    visibleRange: function(currentDate) {
      const start = new Date(currentDate);
      start.setMonth(0);
      start.setDate(1);
      const end = new Date(currentDate);
      end.setFullYear(start.getFullYear() + 4);
      end.setMonth(11);
      end.setDate(31);
      return {
        start: start.toISOString(),
        end: end.toISOString()
      };
    }
},

方法二：返回HTML字符串（支持自定义样式） #

如果需要对两行标签做样式调整，可以直接在单个函数中返回带<br/>的HTML字符串，同时开启slotLabelHtml选项允许渲染HTML：

resource5YearsSlide: {
    type: 'resourceTimeline',
    buttonText: '5 Years',
    dateIncrement: { year: 1 },
    slotDuration: { month: 3 },
    slotLabelInterval: { month: 3 },
    slotLabelFormat: function(arg) {
      const date = new Date(arg.date.marker);
      const month = date.getMonth();
      const year = date.getFullYear();
      const quarter = Math.floor(month / 3) + 1;
      // 用<br/>实现换行，可添加HTML样式
      return `<span style="font-size:14px">${year}</span><br/><span style="font-size:12px">T${quarter}</span>`;
    },
    slotLabelHtml: true, // 必须开启此选项才能解析HTML
    visibleRange: function(currentDate) {
      const start = new Date(currentDate);
      start.setMonth(0);
      start.setDate(1);
      const end = new Date(currentDate);
      end.setFullYear(start.getFullYear() + 4);
      end.setMonth(11);
      end.setDate(31);
      return {
        start: start.toISOString(),
        end: end.toISOString()
      };
    }
},

注意事项 #

• 方法一无需额外配置，FullCalendar会自动将数组的每个元素作为一行渲染。
• 方法二需注意数据安全性，若日期来源不可信，可能存在XSS风险，仅在数据可控时使用。

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