自定义 FullCalendar 中的 Day Cell 内容

Question

我正在使用fullcalendar进行反应。我正在尝试自定义dayGrid视图。根据React 的内容注入文档，我可以使用自定义内容来呈现日期和标题单元格。dayCellContent “钩子”指出：

生成的内容插入到日单元格最里面的包装器内。它不会取代细胞。

我已经提供了一个实现，dayCellContent并注意到我的内容被注入到以下结构中：

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

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

例子：

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

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

Answer 1

尽管没有使用 React，但我也有同样的要求。我按照上面的建议使用 DOM 元素的手动操作解决了这个问题。我使用 jQuery 进行选择和操作。如果有人想查看如何使用 DOM 操作来实现这一点的示例，则将其发布在这里。

\n

我实现了dayCellContent将 day-cell DOM 元素包装在 中，使其易于识别，并具有基于年份数字的span唯一属性：id

\n

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

\n

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

\n

然后，我dayCellDidMount通过查找适当的单元格并选择其父级 \xe2\x80\x99s 父级来实现 DOM 操作：

\n

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

\n

在本例中，我只是在单元格的左上角放置了一个指向 w3c 的链接，其中包含测试文本，其中还包括天数。它会产生如下所示的单元格：

\n

\n

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

\n

警告：此方法对FullCalendar生成的 DOM 结构做出假设。生成的 HTML 可能会在产品的未来版本中发生更改，从而导致其失效。如果您这样做，那么在进行 FullCalendar 更新时要小心。

\n

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

\n