FullCalendar Vue 高级功能作用域插槽的可用性及使用问题

我太懂你这种摸不着头脑的感觉了！FullCalendar的Vue文档在插槽这块确实有点“信息不对称”——官方只明明白白标注了event-content是可用的Vue作用域插槽，但实际上那些高级功能（比如资源时间线）里的内容注入项，用法和你熟悉的eventContent插槽完全不一样。

先给你理清核心问题：FullCalendar的Vue封装里，只有少数核心内容注入项被做成了Vue插槽，大部分高级功能的内容定制，还是要靠FullCalendar原生的配置回调来实现。你尝试使用的cellContent（资源时间线功能里的内容注入点）就属于后者，它并不是Vue插槽，所以直接用<template #cellContent>语法肯定不会生效。

那正确的使用方式是什么呢？我给你举个具体的例子，如果你要定制资源时间线的资源列单元格内容，得把cellContent作为resourceAreaColumns配置项里的回调函数来配置：

<FullCalendar
  :options="{
    plugins: [resourceTimelinePlugin], // 记得先引入对应的高级插件
    resourceAreaColumns: [
      {
        labelText: '我的资源',
        field: 'resourceName',
        // 这里配置cellContent回调函数
        cellContent: (info) => {
          // info参数包含了当前单元格的所有上下文数据，比如info.resource就是对应的资源对象
          return `<p>${info.resource.title} - 自定义内容</p>`
        }
      }
    ],
    // 你的资源数据
    resources: [
      { id: 'res1', title: '会议室A' },
      { id: 'res2', title: '会议室B' }
    ]
    // 其他日历配置...
  }"
/>

如果你想在这个单元格里使用Vue组件（而不是纯HTML字符串），也有办法实现——可以用Vue的渲染函数手动挂载组件，示例如下：

<template>
  <FullCalendar :options="calendarOptions" />
</template>

<script setup>
import { h, createApp } from 'vue'
import FullCalendar from '@fullcalendar/vue3'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import MyCustomCell from './MyCustomCell.vue' // 你的自定义Vue组件

const calendarOptions = {
  plugins: [resourceTimelinePlugin],
  resourceAreaColumns: [
    {
      labelText: '资源列表',
      field: 'title',
      cellContent: (info) => {
        // 创建一个临时DOM容器
        const tempContainer = document.createElement('div')
        // 将自定义组件挂载到临时容器，并传入资源数据
        createApp({
          render: () => h(MyCustomCell, { resource: info.resource })
        }).mount(tempContainer)
        // 返回渲染后的HTML内容给FullCalendar
        return tempContainer.innerHTML
      }
    }
  ],
  resources: [
    { id: 'res1', title: '会议室A' },
    { id: 'res2', title: '会议室B' }
  ]
}
</script>

最后再给你划个重点：目前FullCalendar的Vue封装只明确支持event-content这一个Vue插槽（可能还有个别未在文档中标注的，但不建议依赖），所有高级功能里的内容定制需求，都需要回到FullCalendar的原生配置中，找到对应的回调函数来实现，而不是尝试用Vue插槽语法。这确实是官方文档的一个小疏漏，很容易让开发者踩坑。

备注：内容来源于stack exchange，提问作者TheCuriousDev