FullCalendar资源时间线单日模式下如何显示日期标题？

在使用FullCalendar的资源时间线视图时，切换到单日模式（resourceTimelineDay）后，头部的日期标题会缺失，但周视图（resourceTimelineWeek）能正常显示标题。

周视图（显示正常） #

日视图（头部标题缺失） #

当前代码示例 #

JavaScript

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'resourceTimelineDay',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
    events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
  });

  calendar.render();
});

CSS

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}

HTML

<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.11/index.global.min.js"></script>

<div id='calendar'></div>

解决方案 #

要在resourceTimelineDay视图下显示头部日期，可通过以下几种方式配置：

1. 为单个视图指定标题格式

在Calendar配置中添加views选项，单独为单日视图设置标题格式：

var calendar = new FullCalendar.Calendar(calendarEl, {
  // 保留原有配置...
  views: {
    resourceTimelineDay: {
      titleFormat: { year: 'numeric', month: 'long', day: 'numeric' }
      // 示例输出："2024年5月20日"，可根据需求调整格式参数
    }
  }
});

2. 全局统一配置所有视图的标题格式

如果需要为所有视图统一设置标题规则，使用titleFormat选项：

var calendar = new FullCalendar.Calendar(calendarEl, {
  // 保留原有配置...
  titleFormat: {
    day: 'YYYY-MM-DD',
    week: 'YYYY年MM月DD日 - YYYY年MM月DD日',
    month: 'YYYY年MM月'
  }
});

3. 动态生成标题（更灵活）

通过titleContent回调函数，根据当前视图类型动态生成标题内容：

var calendar = new FullCalendar.Calendar(calendarEl, {
  // 保留原有配置...
  titleContent: function(arg) {
    if (arg.view.type === 'resourceTimelineDay') {
      return arg.date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      });
    }
    // 其他视图沿用默认标题
    return arg.text;
  }
});

以上方案均可解决单日模式下头部标题缺失的问题，可根据实际需求选择适配方式。

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