FullCalendar v5.6.0 + React如何自定义dayGrid视图日单元格完整内容

开发场景 #

• 项目使用React技术栈，搭载v5.6.0版本FullCalendar组件，针对dayGrid视图开展自定义功能开发。
• 参照官方React端内容注入文档指引，可通过钩子方法自定义渲染日期单元格、表头单元格内容；其中dayCellContent钩子的官方定义为：生成的内容会被插入到日单元格的最内层容器中，不会替换原有单元格本身。

实际渲染异常 #

按照文档要求实现dayCellContent方法后，自定义内容实际被注入到如下固定DOM节点层级中：

<td class="fc-daygrid-day fc-day fc-day-wed fc-day-past rot_time-off_day-cell" data-date="2021-04-07">
    <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
        <div class="fc-daygrid-day-top">
            <a class="fc-daygrid-day-number">
                ...custom content goes here
            </a>
        </div>
        <div class="fc-daygrid-day-events"></div>
        <div class="fc-daygrid-day-bg"></div>
    </div>
</td>

• 受原有DOM元素定位规则限制，当前注入逻辑仅支持将自定义内容放置在日期单元格的右上角区域，且自定义内容会被包裹在原生的a锚点元素内部，无法实现单元格全区域的自定义布局。
• 示例实现代码：

function renderDayCell(dayCellContent: DayCellContentArg) {
    return (
        <div>
            {dayCellContent.dayNumberText}
        </div>
    );
}

运行上述代码后，自定义内容始终被固定在单元格右上角位置，无法调整布局范围。

待确认的核心问题 #

• 是否存在适配当前v5.6.0版本的规范实现方式，支持自定义日单元格的全部内容？
• 观测到部分使用FullCalendar的站点可将自定义内容直接插入到td根元素中，需确认这类实现是否与版本强相关，或是基于传统JS端的domNodes、html配置项实现，最终获取适配5.6.0版本的可行落地路径。

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