在使用 FullCalendar 这一款前端日历插件过程中，有时候会遇到标题按钮（titleRangeSeparator 和 prev/next）突然消失的情况，这会导致用户无法正常操作日历。我们需要找出原因并解决它。
问题分析
当 FullCalendar 初始化完成后，它会生成一个 DOM 结构，其中包含了用于切换日期范围和前后月份的两个按钮。这些按钮通常位于日历头部，但实际上可以通过配置来设置它们所在的位置。
如果你发现这些按钮不见了，那么很可能是由于以下几种原因：
- CSS 样式问题：有可能是某个 CSS 样式覆盖了按钮或者隐藏了按钮。
- 插件版本问题：FullCalendar 的新版本可能会改变 DOM 结构或者默认行为，导致按钮消失。
- 配置问题：可能是你在配置中关闭了标题按钮或者将它们移动到了其他位置。
解决方案
检查 CSS 样式
首先，我们需要检查是否有 CSS 样式影响了按钮的显示。可以使用浏览器开发者工具检查元素样式，看看有没有 CSS 属性覆盖了按钮的样式。
如果有，那么可以考虑修改对应样式或者强制覆盖样式来解决问题。比如，可以在 CSS 中添加以下代码：
.fc-toolbar .fc-button {
display: inline-block !important;
visibility: visible !important;
}这段代码会强制将标题按钮设置为可见和行内块元素。
检查 FullCalendar 版本
如果检查了 CSS 样式之后仍然没有找到原因，那么可能是 FullCalendar 版本的问题。你可以尝试升级或者降级 FullCalendar 插件来解决问题。
检查配置
最后，我们需要检查 FullCalendar 的配置选项，看看是否有禁用或移动标题按钮的设置。通常情况下，FullCalendar 默认会在头部显示标题按钮，但是如果你修改了相关配置，就可能会导致按钮消失。
以下是一个典型的 FullCalendar 配置示例，你可以参考其中的配置项：
-- -------------------- ---- -------
--------------------------------------------- ---------- -
--- ---------- - ------------------------------------
--- -------- - --- --------------------------------- -
------------ ---------------
-------------- -
----- ---------- -------
------- --------
------ ---------------------------------------
--
-- --------
---
------------------
---在上面的配置中，我们可以看到 headerToolbar 配置项，它定义了 FullCalendar 头部工具栏的布局。如果你不小心删除了 left 或者 center 中的某个配置项，那么标题按钮就会消失。
结论
以上就是 FullCalendar 标题按钮消失问题的解决方案。我们需要仔细排查可能的原因，并针对性地采取措施来解决问题。最后，还需要注意 FullCalendar 版本和配置选项的变化，以免出现不必要的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15661