如何在FullCalendar头部的月份/年份显示位置注入日期选择器

完全可以实现，FullCalendar提供了完善的自定义扩展能力，以下是两种常用的稳定实现方式：

方案1：使用官方自定义回调注入（推荐） #

在FullCalendar的生命周期回调中操作DOM，绑定日期选择器，无需修改源码，兼容性更强：

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
// 引入你所用的日期选择器依赖，示例用flatpickr，也可替换为Element DatePicker、Ant Design DatePicker等组件
import flatpickr from 'flatpickr';

const calendarDom = document.getElementById('calendar');
const calendar = new Calendar(calendarDom, {
  plugins: [dayGridPlugin],
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,dayGridWeek,dayGridDay'
  },
  // 日历渲染完成触发的回调
  didMount: () => {
    // 获取头部年月标题的DOM节点，v5/v6版本类名为.fc-toolbar-title，低版本可自行检查元素获取对应类名
    const headerTitleDom = document.querySelector('.fc-toolbar-title');
    headerTitleDom.style.cursor = 'pointer';
    // 给标题绑定日期选择器
    flatpickr(headerTitleDom, {
      dateFormat: 'Y-m',
      onChange: (selectedDates) => {
        if(selectedDates[0]) {
          // 调用官方API跳转日历到选中日期
          calendar.gotoDate(selectedDates[0]);
        }
      }
    })
  }
});

calendar.render();

方案2：自定义工具栏完全替换原有标题 #

如果需要更灵活的样式和交互，可以直接隐藏原有头部标题，自行在对应位置插入日期选择器组件：

• 把headerToolbar配置中的center字段留空，隐藏原有年月标题
• 在日历容器上方对应位置插入自定义的日期选择器组件
• 选择器值变化时调用calendar.gotoDate()方法同步日历视图即可

注意事项 #

• DOM操作需要放在FullCalendar渲染完成的回调中执行，避免节点未加载导致的报错
• 如果是响应式页面，需要做好日期选择器的位置适配，避免窗口缩放时出现错位
• 日期格式需要和日历视图匹配，如月视图可以只选年月，周/日视图可以选具体日期

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