FullCalendar v6 不支持通过 ng-template 直接注入或替换整个顶部工具栏（headerToolbar），但提供了丰富的细粒度内容钩子（如 dayHeaderContent、slotLabelContent 等），可精准定制各区域文本与结构。本文详解可用钩子、实现方式及常见误区。
fullcalendar v6 不支持通过 `ng-template` 直接注入或替换整个顶部工具栏（headertoolbar），但提供了丰富的细粒度内容钩子（如 `dayheadercontent`、`slotlabelcontent` 等），可精准定制各区域文本与结构。本文详解可用钩子、实现方式及常见误区。
在 FullCalendar v6 的 Angular 集成中，开发者常期望像
不过，v6 提供了 15 个精细化的内容定制钩子（content hooks），覆盖日历绝大多数视觉区块。这些钩子均以 xxxContent 命名，支持通过 ng-template 注入自定义结构，例如：
<full-calendar [options]="calendarOptions">
<!-- 自定义每日列标题（如“Mon”、“Tue”） -->
<ng-template #dayHeaderContent let-arg>
<span class="fc-day-header-badge">{{ arg.date | date:'EEE' }}</span>
<small>{{ arg.date | date:'d' }}</small>
</ng-template>
<!-- 自定义时间轴左侧标签（如“9am”、“10am”） -->
<ng-template #slotLabelContent let-arg>
<i class="icon-clock"></i> {{ arg.text }}
</ng-template>
<!-- 自定义“无事件”提示文字 -->
<ng-template #noEventsContent>
<div class="fc-no-events">
<span>✅ 日程已清空</span>
</div>
</ng-template>
</full-calendar>对应地，需在组件 TypeScript 中将这些钩子名称注册到 calendarOptions：
export class CalendarComponent {
calendarOptions: CalendarOptions = {
initialView: 'timeGridWeek',
headerToolbar: { // ⚠️ 此处仅控制按钮布局，不可被模板替换
left: 'prev,next today',
center: 'title',
right: 'timeGridDay,timeGridWeek,dayGridMonth'
},
// ✅ 启用模板钩子（必须显式声明）
dayHeaderContent: this.dayHeaderContent.bind(this),
slotLabelContent: this.slotLabelContent.bind(this),
noEventsContent: this.noEventsContent.bind(this),
// 其他钩子同理...
};
// 模板引用需通过 ViewContainerRef 获取，但 Angular 封装后更推荐使用模板引用变量 + options 绑定
}✅ 关键注意事项：
- headerToolbar 选项（left/center/right）仅控制内置按钮与标题的位置和可见性，其 DOM 结构本身不可被
替换 ；- 所有 xxxContent 钩子均需在 calendarOptions 中显式赋值为函数（Angular 会自动桥接模板引用），不能仅靠 #xxx 属性存在；
- 官方未提供 headerContent、headerToolbarContent 或 viewTitleContent 等钩子，未来版本亦未列入公开路线图；
- 若需深度定制顶部栏（如添加搜索框、切换器、徽标），建议采用 CSS 覆盖 + 外部 DOM 插入：监听 datesSet 事件，在 .fc-toolbar 父容器中动态插入自定义元素。
综上，FullCalendar v6 的设计哲学是「解耦而非全量接管」——它不开放顶层工具栏的模板化，但赋予你对每一个原子级内容区域（日期头、时间标签、空状态等）的完全控制权。合理组合这些钩子，配合 CSS 变量与响应式类，足以构建专业、品牌化的日历界面，无需 hack 或 DOM 操作。
