FullCalendar自定义14天agendaWeek视图：需实现奇偶周标题显示

嘿，我之前刚好做过类似的定制，给你分享个靠谱的解决办法！

你现有的agendaTwoweeks视图定义完全没问题，接下来只需要添加自定义标题格式化逻辑，通过判断视图起始日期所在的周是奇数还是偶数，就能把默认标题替换成Even或Odd啦。

方案1：直接在视图配置里自定义标题格式 #

你可以在视图配置中指定titleFormat，用一个函数动态生成标题：

agendaTwoweeks: {
  type: 'agendaWeek',
  columnFormat: 'ddd',
  duration: { days: 14 },
  titleFormat: function(dateInfo) {
    // 获取视图起始日期的周数
    const startDate = dateInfo.start;
    const weekNumber = getISOWeekNumber(startDate); // 用下面的工具函数计算ISO周数
    
    // 判断奇数/偶数周（周数从1开始计数）
    const weekType = weekNumber % 2 === 0 ? 'Even' : 'Odd';
    return `${weekType} Week`;
  }
}

补充：实现ISO标准周数计算函数（原生JS） #

如果没用到Moment.js、Day.js这类日期库，需要自己写一个符合ISO标准的周数计算函数，避免跨年或跨月时周数计算出错：

function getISOWeekNumber(date) {
  const tempDate = new Date(date.getTime());
  tempDate.setHours(0, 0, 0, 0);
  // 以周四为一周中点，确保跨年周计算准确
  tempDate.setDate(tempDate.getDate() + 3 - (tempDate.getDay() + 6) % 7);
  const firstThursday = new Date(tempDate.getFullYear(), 0, 4);
  const dayDiff = Math.round((tempDate - firstThursday) / 86400000);
  return 1 + Math.floor((dayDiff - 3 + (firstThursday.getDay() + 6) % 7) / 7);
}

方案2：用日期库简化周数计算（推荐） #

如果已经在用Day.js或Moment.js，周数计算会简单很多，比如用Day.js：

titleFormat: function(dateInfo) {
  const weekNumber = dayjs(dateInfo.start).week();
  const weekType = weekNumber % 2 === 0 ? 'Even' : 'Odd';
  return `${weekType} Week`;
}

额外技巧：动态更新标题（可选） #

如果需要在切换视图、日期范围变化时实时更新标题，可以用datesSet回调手动修改：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    views: {
      agendaTwoweeks: {
        type: 'agendaWeek',
        columnFormat: 'ddd',
        duration: { days: 14 }
      }
    },
    datesSet: function(info) {
      if (info.view.type === 'agendaTwoweeks') {
        const weekNumber = getISOWeekNumber(info.start); // 或用日期库方法
        const weekType = weekNumber % 2 === 0 ? 'Even' : 'Odd';
        info.view.setTitle(`${weekType} Week`);
      }
    }
  });
  calendar.render();
});

这个方案亲测有效，不管是初始化加载还是切换视图，标题都会正确显示Even或Odd～

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