FullCalendar 6是否支持通过ng-template注入头部内容？

核心结论 #

FullCalendar 6的Angular封装不支持通过ng-template（如#header或#headerToolbar）注入头部内容，官方仅为eventContent提供了模板注入的专属接口，头部工具栏的自定义需要通过以下两种方式实现。

自定义头部的可行方案 #

方案1：通过配置项自定义头部按钮 #

在calendarOptions中通过headerToolbar定义按钮布局，配合customButtons添加带自定义逻辑的按钮：

calendarOptions = {
  headerToolbar: {
    left: 'prev,next today myCustomBtn',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek'
  },
  customButtons: {
    myCustomBtn: {
      text: '导出日程',
      click: () => {
        // 自定义按钮逻辑示例
        console.log('触发导出操作');
      }
    }
  },
  initialView: 'dayGridMonth'
};

方案2：完全自定义头部HTML结构 #

如果需要更复杂的头部布局（比如添加输入框、下拉选择器），可以隐藏FullCalendar自带头部，自行编写头部组件并通过FullCalendar的API控制日历行为：

组件模板

<!-- 自定义头部 -->
<div class="custom-cal-header">
  <button (click)="calendarApi?.prev()">← 上月</button>
  <button (click)="calendarApi?.today()">今天</button>
  <button (click)="calendarApi?.next()">下月 →</button>
  <h3>{{ calendarTitle }}</h3>
  <select (change)="switchView($event.target.value)">
    <option value="dayGridMonth">月视图</option>
    <option value="timeGridWeek">周视图</option>
  </select>
</div>

<!-- 隐藏自带头部的日历 -->
<full-calendar
  [options]="calendarOptions"
  (initialized)="onCalendarInit($event)"
></full-calendar>

组件逻辑

import { Component } from '@angular/core';
import { Calendar } from '@fullcalendar/core';

@Component({
  selector: 'app-custom-calendar',
  templateUrl: './custom-calendar.component.html',
  styleUrls: ['./custom-calendar.component.css']
})
export class CustomCalendarComponent {
  calendarApi?: Calendar;
  calendarTitle = '';

  calendarOptions = {
    headerToolbar: false, // 禁用自带头部
    initialView: 'dayGridMonth'
  };

  onCalendarInit(calendar: Calendar) {
    this.calendarApi = calendar;
    this.updateCalendarTitle();
    // 监听日期变化更新标题
    calendar.on('dateSet', () => this.updateCalendarTitle());
  }

  updateCalendarTitle() {
    this.calendarTitle = this.calendarApi?.view.title || '';
  }

  switchView(viewName: string) {
    this.calendarApi?.changeView(viewName);
  }
}

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