如何在 FullCalendar 的每一行之前添加自定义 HTML？答案

【问题标题】：How to add custom HTML before each row in FullCalendar?如何在 FullCalendar 的每一行之前添加自定义 HTML？
【发布时间】：2021-07-14 08:13:14
【问题描述】：

我正在使用 FullCalendar 5.8，并希望在每一行之前添加自定义 HTML。我当前的代码是：

import React from 'react'
import ReactDOM from 'react-dom';
import FullCalendar from '@fullcalendar/react'
import bootstrapPlugin from '@fullcalendar/bootstrap';
import dayGridPlugin from '@fullcalendar/daygrid';

ReactDOM.render(
    <FullCalendar
        themeSystem={'bootstrap'}
        plugins={[bootstrapPlugin, dayGridPlugin]}
        initialView={'dayGridMonth'}
    />,
    document.querySelector('#js-events')
);

结果：

我可以使用某种事件来挂钩渲染过程，以便在每一行之前添加一些 HTML 代码，如下图所示？

理想情况下，我不想更改 HTML，而是使用 FullCalendar 的原生事件系统。

如果有任何 sn-p 或提示，我将不胜感激。谢谢一百万。

【问题讨论】：

标签： javascript fullcalendar fullcalendar-5

【解决方案1】：

我发现最可靠的方法是使用 viewDidMount 属性更改 HTML：

        viewDidMount={({el}) => {
            const calendarTbody = el.querySelector(
                '.fc-scrollgrid-sync-table > tbody'
            );

            for (const row of calendarTbody.querySelectorAll('tr')) {
                row.insertAdjacentHTML(
                    'afterbegin',
                    '<td class="fc-daygrid-day">content</td>'
                );
            }
        }}

更新：

这种方法是有缺陷的。它只在日历渲染时调用一次，并且在日历由于月份切换而重新渲染时不再发生。

我需要修改日历的最终 HTML，但很失望地发现没有这样的 JS 事件可以让我在所有渲染完成后访问日历的 el 对象。 eventDidMount 似乎没用。请问还有什么建议吗？

【讨论】：