FullCalendar标题与切换按钮定制问题求助

我来帮你搞定这两个FullCalendar的定制需求，咱们一步步调整代码：

一、拆分标题为年份和月份的独立<p>元素 #

FullCalendar默认的标题是包含年月的<h2>标签，我们可以利用viewRender钩子，在视图渲染完成后替换这个默认元素。具体逻辑：

• 获取当前视图的年份和月份索引（注意月份是0开始的）
• 生成两个<p>元素，分别展示年份和对应的乌克兰语月份名称
• 替换掉默认的.fc-center .fc-title元素

二、将切换按钮改为对应月份名称 #

原代码的问题在于按钮文本只会初始化一次，切换月份后不会自动更新，而且没有处理1月/12月的边界情况。我们需要：

• 在viewRender中实时计算当前视图的上一个和下一个月份索引（比如1月的上一个是12月，12月的下一个是1月）
• 直接更新按钮的文本内容，不需要依赖只会初始化一次的buttonText配置

修正后的完整代码 #

var monthNames = ['Січень','Лютий','Березень','Квітень','Травень','Червень','Липень','Серпень','Вересень','Жовтень','Листопад','Грудень'];

$(document).ready(function() {
  $('#calendar').fullCalendar({
    firstDay: 1, /* первый день недели */
    defaultView: 'month',
    header: {
      left: 'prev,next',
      center: 'title',
    },
    viewRender: function (view, element) {
      // 1. 处理标题拆分：替换默认h2为两个p元素
      var currentDate = view.start; // 获取当前视图的起始日期（比getDate更准确）
      var currentYear = currentDate.year();
      var currentMonthIndex = currentDate.month();
      var currentMonthName = monthNames[currentMonthIndex];
      
      // 生成自定义标题HTML
      var customTitle = `<p class="fc-year">${currentYear}</p><p class="fc-month">${currentMonthName}</p>`;
      // 替换默认标题
      $('.fc-center .fc-title').html(customTitle);

      // 2. 处理切换按钮文本更新
      // 计算上一个月份索引（处理1月的边界情况）
      var prevMonthIndex = currentMonthIndex === 0 ? 11 : currentMonthIndex - 1;
      // 计算下一个月份索引（处理12月的边界情况）
      var nextMonthIndex = currentMonthIndex === 11 ? 0 : currentMonthIndex + 1;
      
      // 更新按钮文本
      $('.fc-prev-button').text(monthNames[prevMonthIndex]);
      $('.fc-next-button').text(monthNames[nextMonthIndex]);
    },
    // 配置多语言文本
    monthNames: monthNames,
    monthNamesShort: ['Січ.','Лют.','Бер.','Квіт.','Трав.','Черв.','Лип.','Серп.','Вер.','Жовт.','Лис.','Груд.'],
    dayNames: ["Неділя","Понеділок","Вівторок","Середа","Четвер","П'ятниця","Субота"],
    dayNamesShort: ["НД","ПН","ВТ","СР","ЧТ","ПТ","СБ"],
    // 初始按钮文本（后续会被viewRender覆盖，仅作初始化用）
    buttonText: {
      prev: monthNames[new Date().getMonth() === 0 ? 11 : new Date().getMonth() - 1],
      next: monthNames[new Date().getMonth() === 11 ? 0 : new Date().getMonth() + 1]
    },
  });
});

额外说明 #

• 标题部分：你可以给.fc-year和.fc-month添加自定义CSS样式，比如设置display: inline-block让它们并排显示，或者调整字体大小、间距等
• 按钮部分：使用view.start获取视图起始日期比fullCalendar('getDate')更准确，因为getDate返回的是当前选中的单个日期，而视图是整个月份的范围
• 边界处理：通过三元运算符解决了1月和12月的索引循环问题，确保切换按钮的月份名称始终正确

内容的提问来源于stack exchange，提问作者Дмитро Титаренко