reactjs - 在 FullCalendar 中自定义 Day Cell 内容

Question

我正在使用 fullcalendar 和 React。我正在尝试自定义 dayGrid View 。根据Content Injection docs for react我可以使用自定义内容来呈现日期和标题单元格。 dayCellContent “钩子(Hook)”指出:

Generated content is inserted inside the inner-most wrapper of the day cell. It does not replace the cell.

我为 dayCellContent 提供了一个实现，并注意到我的内容被注入(inject)到以下结构中:

<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>

现在，问题是由于元素的定位，此结构允许您仅在日期单元格的右上角 插入内容。此外，它位于 anchor 元素中。

例子:

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

有没有一种干净的方法可以以某种方式自定义单元格的全部内容？我见过几个使用 fullcalendar 的网站，它们的内容直接插入到 td 中。不确定这是否与版本有关，或者他们正在使用基于 domNodes 或 html 的替代 JS 方法。我使用的是 fullcalendar 的 5.6.0 版本。

Answer 1

虽然我没有使用 React，但我也有同样的要求。我按照上面的建议使用手动操作 DOM 元素解决了这个问题。我使用 jQuery 进行选择和操作。它张贴在这里，以防有人想看一个例子，说明如何使用 DOM 操作来实现这一点。

我实现了 dayCellContent，通过将它包装在 span 中，使 day-cell DOM 元素易于识别，并基于一个独特的 id 属性在年号的那一天:

dayCellContent: function(info, create) {
    const element = create('span', { id: "fc-day-span-"+info.date.getDayOfYear() }, info.dayNumberText);
    return element;
},

此 dayCellContent 实现对日历没有明显的影响，但可以更轻松地识别 DOM 中要修改的元素。

然后我实现了 dayCellDidMount 以通过查找适当的单元格并选择其父级的父级来执行 DOM 操作:

dayCellDidMount: function(info) {
    let element = "<div style='position: absolute; left: 4px; top: 4px;'><a href='https://www.w3schools.com/'>TEST-"+info.dayNumberText+"</a></div>";
    $('#fc-day-span-'+info.date.getDayOfYear()).parent().parent().prepend(element);
},

在这种情况下，我刚刚在单元格的左上角放置了一个指向 w3c 的链接，其中包含测试文本，其中还包括日期。它会产生如下所示的单元格:

很明显，CSS 可以改进，应该移到 CSS 定义中，但它说明了这一点。

警告:此方法对 FullCalendar 的 DOM 结构进行了假设产生。生成的 HTML 可能会在产品的 future 版本中发生变化，从而使其失效。如果你这样做，那么在进行 FullCalendar 更新时要小心。

请注意，getDayOfYear 函数来自 ext-all.js 库。任何唯一标识日期的方法都可以。