如何在FullCalendar的resourceTimeGridDay/resourceTimeGridWeek头部插入HTML？

要在Room A、Room B这类资源头部单元格旁添加可点击按钮并打印对应日期和资源ID，你需要用resourceHeaderContent钩子（而非dayHeaderContent，后者仅处理日期顶部头部），具体实现如下：

核心代码实现 #

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    initialView: 'resourceTimeGridWeek',
    datesAboveResources: true, // 匹配你参考的演示布局
    resources: [
      { id: 'a', title: 'Room A' },
      { id: 'b', title: 'Room B' }
    ],
    // 自定义资源头部内容
    resourceHeaderContent: function(info) {
      return `
        <span>${info.resource.title}</span>
        <button class="resource-op-btn" data-res-id="${info.resource.id}" data-date="${info.dateStr}">
          操作
        </button>
      `;
    },
    // 视图加载完成后绑定按钮事件
    viewDidMount: bindResourceBtnEvents,
    // 视图更新（如切换日期、视图类型）后重新绑定事件
    viewDidUpdate: bindResourceBtnEvents
  });

  calendar.render();

  // 封装按钮事件绑定逻辑
  function bindResourceBtnEvents() {
    // 先移除旧按钮的事件（通过克隆节点实现）
    calendarEl.querySelectorAll('.resource-op-btn').forEach(btn => {
      btn.replaceWith(btn.cloneNode(true));
    });
    // 绑定新的点击事件
    calendarEl.querySelectorAll('.resource-op-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const resId = this.dataset.resId;
        const date = this.dataset.date;
        console.log(`所属日期: ${date}, 资源ID: ${resId}`);
      });
    });
  }
});

关键说明 #

• resourceHeaderContent是专门用于定制资源头部的钩子，info参数包含当前资源对象（info.resource）和头部对应的日期字符串（info.dateStr）。
• 通过data-*属性存储资源ID和日期，点击按钮时直接读取即可。
• 由于FullCalendar视图会动态渲染，必须在viewDidMount和viewDidUpdate中重新绑定事件，避免按钮点击失效。

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