FullCalendar标题月份年份堆叠显示，如何修改为水平并排展示？

云原生阿岚

2026-10-6

修复方案

标题堆叠一般是两个原因导致：一是FullCalendar默认将月份、年份作为两个独立块元素渲染，容器宽度不足时自动换行；二是标题容器没有配置禁止换行规则。你可以按下面两种方式任选其一修复：

方式1：调整FullCalendar配置（优先使用）

你当前的titleFormat对象格式配置会让月份和年份独立渲染，容易触发换行，改成字符串模板格式直接拼接为单行文本即可，修改你日历初始化代码中的views部分：

views: {
  dayGridMonth: {
    titleFormat: '{month} {year}'
  }
}

如果需要自定义中文格式，也可以用自定义标题渲染函数：

views: {
  dayGridMonth: {
    title: function(info) {
      const year = info.view.currentStart.getFullYear();
      const month = info.view.currentStart.toLocaleString('zh-CN', {month: 'long'});
      return `${year}年 ${month}`;
    }
  }
}

方式2：补充CSS规则

如果是容器宽度不足导致的换行，直接在你的样式文件中加入以下规则即可，优先级要高于官方默认CSS：

/* 强制标题不换行 */
.fc .fc-toolbar-title {
  white-space: nowrap;
  width: auto;
}
/* 给标题区域预留足够宽度，避免被左右按钮挤压 */
.fc .fc-toolbar > div:nth-child(2) {
  flex: 0 0 auto;
  min-width: fit-content;
}