本文详解如何通过 custombuttons 重定义 fullcalendar 中的 “today” 按钮，实现首字母大写的显示（如 “today”），并确保其正确触发跳转至当天视图的功能。

本文详解如何通过 custombuttons 重定义 fullcalendar 中的 “today” 按钮，实现首字母大写的显示（如 “today”），并确保其正确触发跳转至当天视图的功能。

在 FullCalendar（v3 及更早版本）中，内置的 today 按钮默认显示为小写 “today”，而官方并未提供直接修改其文案的配置项。若需统一 UI 风格（例如遵循标题大小写规范），必须借助 customButtons 创建自定义按钮，并显式调用 fullCalendar('today') 方法来复现原生功能。

以下是标准、可运行的实现方式：

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

$(document).ready(function() {
    $('#CalendarioWeb').fullCalendar({
        header: {
            left: 'prev,next,today,Today', // 注意：此处 "today" 仍保留原生按钮（可选），"Today" 为自定义
            center: 'title',
            right: 'month,basicWeek,basicDay,agendaWeek,agendaDay'
        },
        customButtons: {
            Today: {
                text: 'Today',
                click: function() {
                    $('#CalendarioWeb').fullCalendar('today'); // ✅ 关键：必须调用该方法
                }
            }
        }
    });
});

⚠️ 关键注意事项：

• 自定义按钮的 click 回调中，不能仅写字符串 "today"（如问题中错误所示），这不会触发任何操作；必须使用 $('#selector').fullCalendar('today') 执行命令。
• customButtons 的键名（如 Today）需与 header 中引用的名称完全一致（区分大小写）。
• 若不希望同时显示原生 today 按钮，请从 header.left 中移除 today，仅保留 Today。
• 此方案适用于 FullCalendar v3；若使用 v5+（基于 @fullcalendar/core），语法已变更（改用 initialDate、todayBtn 和 todayBtnText 等配置），需另行适配。

通过以上配置，即可优雅地实现语义清晰、风格统一的 “Today” 按钮，兼顾可访问性与用户体验。