本文详解如何通过 custombuttons 正确创建一个显示为 “today”（首字母大写）的今日跳转按钮，并调用 fullcalendar 内置的 today() 方法实现功能，避免常见语法与调用错误。
本文详解如何通过 custombuttons 正确创建一个显示为 “today”（首字母大写）的今日跳转按钮，并调用 fullcalendar 内置的 today() 方法实现功能，避免常见语法与调用错误。
在 FullCalendar（v3 及更早版本）中，内置的 today 按钮默认显示为小写的 “today”，若需统一 UI 风格（如遵循标题大小写规范），常需将其改为首字母大写的 “Today”。直接修改 header.left 中的按钮名（如写成 Today）并不生效——因为 FullCalendar 仅识别预设按钮名（today, prev, next 等），自定义文本必须配合 customButtons 使用。
正确做法是：
- 在 customButtons 中定义新按钮（如 Today），设置 text: "Today"；
- 在 click 回调中显式调用 $('#calendar').fullCalendar('today') 方法（注意：必须传入 jQuery 选择器并调用实例方法，而非仅返回字符串 "today"）；
- 将该自定义按钮名加入 header.left 或其他位置（如 left: 'prev,next,Today'），同时移除默认的 today 按钮，避免重复。
✅ 正确示例代码如下：
$(document).ready(function() {
$('#CalendarioWeb').fullCalendar({
header: {
left: 'prev,next,Today', // 移除默认 'today'，使用自定义 'Today'
center: 'title',
right: 'month,basicWeek,basicDay,agendaWeek,agendaDay'
},
customButtons: {
Today: { // 按钮标识符（任意合法键名）
text: 'Today', // 显示文本（首字母大写）
click: function() {
$('#CalendarioWeb').fullCalendar('today'); // 关键：触发原生 today 方法
}
}
}
});
});
⚠️ 注意事项：
- fullCalendar('today') 是 v3 的写法；若使用 FullCalendar v5+，API 已重构，需改用 calendar.today()（通过 getApi() 获取实例），且 customButtons 被 customButtons + buttonText + views 等新配置替代；
- 自定义按钮名（如 Today）仅用于配置，不参与内部逻辑匹配，因此 click 中必须手动调用方法；
- 确保 DOM 元素 #CalendarioWeb 已存在且初始化成功，否则 fullCalendar('today') 将报错；
- 若需多语言支持，建议结合 locale 和 buttonText 配置，而非硬编码 text。
总结：自定义按钮的核心在于“声明 + 调用”的组合——customButtons 定义外观与交互入口，fullCalendar('today') 执行实际行为。忽略后者将导致按钮无响应，这是初学者最常见的疏漏。
