FullCalendar的resourceTimelineWeek视图能否为日单元格设置HTML内容？

FullCalendar v5已正式移除dayRender方法，原slotLaneContent仅单行显示按钮是因为没有适配资源时间线视图的多资源插槽遍历逻辑，可通过以下两种方案实现所有单元格添加按钮的需求：

方案1：使用slotLaneDidMount钩子（推荐） #

该钩子会在每个资源行与日期交叉的单元格挂载时独立触发，天然覆盖所有单元格，可直接操作DOM添加按钮和绑定事件：

import { Calendar } from '@fullcalendar/core';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';

const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
  plugins: [resourceTimelinePlugin],
  initialView: 'resourceTimelineWeek',
  resources: [/* 你的资源配置 */],
  // 核心配置：每个日单元格挂载时执行
  slotLaneDidMount: (info) => {
    // 创建自定义按钮
    const operateBtn = document.createElement('button');
    operateBtn.innerText = '新增';
    operateBtn.className = 'custom-day-btn';
    // 绑定点击事件，可直接获取当前单元格的日期、所属资源信息
    operateBtn.addEventListener('click', () => {
      const currentDate = info.date;
      const belongResource = info.resource;
      // 自定义业务逻辑
      console.log('选中日期', currentDate, '所属资源', belongResource);
    });
    // 插入到当前单元格DOM
    info.el.appendChild(operateBtn);
  }
});

calendar.render();

配套样式调整：

/* 给单元格加相对定位，避免按钮偏移 */
.fc-timeline-slot-lane {
  position: relative;
}
.custom-day-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 12px;
  padding: 2px 6px;
  z-index: 10;
  border: none;
  border-radius: 3px;
  background: #165DFF;
  color: #fff;
  cursor: pointer;
}

方案2：使用slotLaneContent自定义单元格内容 #

如果需要完全自定义单元格的渲染结构，可以用该属性返回自定义HTML，后续通过事件委托处理按钮点击即可：

slotLaneContent: (info) => {
  return `
    <div class="custom-slot-wrapper">
      <button class="custom-day-btn" 
        data-date="${info.date.toISOString()}" 
        data-resource-id="${info.resource.id}"
      >
        新增
      </button>
    </div>
  `;
}

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