能否为FullCalendar自定义视图设置按钮提示（buttonHints）？

问题描述 #

我是FullCalendar的新手，正在探索其功能。已创建名为timeGridSevenDays的自定义视图，基于timeGrid类型，时长7天。但发现该自定义视图的today、prev、next按钮悬停提示文本不正确——today按钮仅显示“This”，因系统无法识别视图时间周期。请问是否可为此视图设置按钮提示？

原代码示例：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'en-gb',
    initialView: 'dayGridMonth',
    events: 'https://fullcalendar.io/api/demo-feeds/events.json',
    editable: true,
    selectable: true,
    headerToolbar: {
          right: 'today prev,next dayGridMonth,dayGridWeek,timeGridSevenDays',
          center: 'title',
          left: '',
    },
    views: {
      timeGridSevenDays: {
        type: 'timeGrid',
        duration: { days: 7 },
        buttonText: 'list',
      }
    }
  });

  calendar.render();
});

解决方案 #

FullCalendar的按钮提示由本地化语言包控制，自定义视图无默认周期识别规则，需手动扩展本地化配置来指定对应提示文本，有两种实现方式：

1. 扩展本地化语言包，全局设置按钮提示 #

通过扩展目标语言（这里是en-gb）的本地化配置，为自定义视图的prev/next/today按钮指定7天周期的提示：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  // 扩展en-gb本地化配置，添加自定义视图的按钮提示
  FullCalendar.globalLocales.push({
    code: 'en-gb',
    // 全局按钮提示（多视图共用逻辑时使用）
    buttonHints: {
      prev: 'Go to previous 7 days',
      next: 'Go to next 7 days',
      today: 'Go to today in 7-day view'
    },
    // 针对特定视图单独设置提示（优先级更高）
    viewButtonHints: {
      timeGridSevenDays: {
        prev: 'Previous 7 days',
        next: 'Next 7 days',
        today: 'Back to today in 7-day view'
      }
    }
  });

  var calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'en-gb',
    initialView: 'dayGridMonth',
    events: 'https://fullcalendar.io/api/demo-feeds/events.json',
    editable: true,
    selectable: true,
    headerToolbar: {
          right: 'today prev,next dayGridMonth,dayGridWeek,timeGridSevenDays',
          center: 'title',
          left: '',
    },
    views: {
      timeGridSevenDays: {
        type: 'timeGrid',
        duration: { days: 7 },
        buttonText: '7-Day View',
      }
    }
  });

  calendar.render();
});

2. 单独设置视图切换按钮的提示 #

如果只需要修改切换到该自定义视图的按钮提示，可直接在视图定义中添加buttonHint属性：

views: {
  timeGridSevenDays: {
    type: 'timeGrid',
    duration: { days: 7 },
    buttonText: '7-Day View',
    buttonHint: 'Switch to 7-day time grid view' // 切换视图按钮的悬停提示
  }
}

说明 #

• prev/next/today按钮的提示必须通过本地化配置修改，因为它们的文本是根据当前视图周期动态生成的，自定义视图无默认周期映射，需手动指定。
• viewButtonHints中的配置优先级高于全局buttonHints，可针对单个视图做精细化设置。

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