如何在FullCalendar的dayHeaderContent钩子中访问默认内容添加自定义元素

方案1：自行生成等效默认内容后拼接自定义内容 #

dayHeaderContent 钩子的入参自带当前表头对应的date对象、视图配置信息，你可以直接按当前日历的语言、视图默认日期格式，自行生成和官方默认渲染完全一致的文本/结构，再追加你需要的额外内容即可。
示例代码如下：

// 以JS环境为例
dayHeaderContent: (args) => {
  // 生成和默认效果完全对齐的表头内容，可自行调整格式化规则匹配当前视图
  const defaultContent = new Intl.DateTimeFormat('zh-CN', {
    weekday: 'short',
    day: 'numeric'
  }).format(args.date);
  // 拼接自定义内容返回
  return `${defaultContent} <span class="custom-header-tag">额外内容</span>`;
}

如果需要完全对齐FullCalendar的内置格式化规则，可直接调用日历实例暴露的formatDate公共方法，传入对应视图的格式参数即可，生成结果和内部私有函数的输出完全一致。

方案2：通过生命周期钩子直接注入内容（无需重写默认渲染） #

如果你不想自己处理默认内容的生成逻辑，可以不使用dayHeaderContent钩子，转而使用dayHeaderDidMount生命周期钩子，在已经渲染好默认内容的表头DOM节点中直接插入自定义内容：

dayHeaderDidMount: (args) => {
  // args.el为当前表头的原生DOM节点，此时已经渲染好官方默认内容
  const extraNode = document.createElement('div');
  extraNode.classList.add('custom-extra-content');
  extraNode.innerText = '你需要添加的额外内容';
  args.el.appendChild(extraNode);
}

如果涉及表头动态更新的场景，搭配dayHeaderDidUpdate、dayHeaderWillUnmount钩子做内容更新和资源清理即可。

两种方案均兼容FullCalendar所有支持的视图类型，不需要调用内部私有方法，也无需修改源码。

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