FullCalendar v3：groupByDateAndResource为true时如何显示日视图日期标题

当groupByDateAndResource设为true时，FullCalendar v3的日视图会默认隐藏日期标题，以下两种方案可以解决这个问题：

方案1：通过viewRender回调手动添加日期标题 #

在FullCalendar初始化配置中添加viewRender回调，判断当前视图类型后，手动生成并插入日期标题：

// 把这个回调添加到你的FullCalendar初始化参数中
viewRender: function(view, element) {
  // 根据你实际使用的日视图类型调整判断条件，比如'agendaDay'或'day'
  if (view.type === 'agendaDay' && view.options.groupByDateAndResource) {
    // 用日历内置的格式化方法生成日期字符串，复用你的columnFormat配置
    const dateTitle = view.calendar.formatDate(view.start, view.options.columnFormat);
    // 创建标题元素（可自定义类名和样式）
    const titleElement = $(`<div class="fc-day-title fc-widget-header">${dateTitle}</div>`);
    // 将标题插入到视图容器的顶部位置
    element.find('.fc-view-container').prepend(titleElement);
  }
}

注意：如果你的日视图类型是基础的day而非agendaDay，需要把view.type的判断值改成'day'。

方案2：用CSS强制显示隐藏的日期标题 #

部分场景下，日期标题元素只是被CSS隐藏了，直接覆盖样式即可：

/* 针对日程型日视图（agendaDay） */
.fc-agendaDay-view .fc-day-header {
  display: table-cell !important;
  visibility: visible !important;
}

/* 如果是基础日视图（day），使用这个选择器 */
.fc-day-view .fc-day-header {
  display: table-cell !important;
  visibility: visible !important;
}

这种方式更简洁，适合不需要自定义标题样式的场景。

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