Fullcalendar dayRender 没有定义单元格属性答案

【问题标题】：Fullcalendar dayRender does not define cell propertyFullcalendar dayRender 没有定义单元格属性
【发布时间】：2019-09-05 07:56:19
【问题描述】：

我使用fullcalendar.io 插件，我想在日历的每个单元格中添加一些额外的 html，但在控制台中我收到以下错误：

Uncaught TypeError: Cannot read property 'append' of undefined
at Calendar.dayRender (mycode.js?v=1.x:31)
at Calendar.publiclyTrigger (main.js?v=1.x:6949)
at DayGrid.DateComponent.publiclyTrigger (main.js?v=1.x:4008)
at DayGrid._renderCells (main.js?v=1.x:796)
at DayGrid.res [as renderCells] (main.js?v=1.x:3189)
at DayGrid.render (main.js?v=1.x:740)
at DayGrid.Component.receiveProps (main.js?v=1.x:3887)
at SimpleDayGrid.render (main.js?v=1.x:1520)
at SimpleDayGrid.Component.receiveProps (main.js?v=1.x:3887)
at DayGridView.render (main.js?v=1.x:1586)

var calendarEl = document.getElementById('calendar');

      var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'dayGrid', 'timeGrid', 'list' ],
        defaultView: 'dayGridMonth',//'timeGridWeek',
        header: {
          left: 'prevYear,prev,next,nextYear today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        defaultDate: '2019-07-12',
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        dayRender: function(date, element) {
          element.append("<input type=\"checkbox\">AM<br>");
        }

      });

我认为由于某种原因 dayRender 没有定义元素变量。为什么会发生这种情况？

【问题讨论】：

您是否尝试过查看 dayRender 文档？见fullcalendar.io/docs/dayRender。你能看看文档中是否定义了任何element 参数吗？不。所有内容都在一个参数下提供，作为其中的子属性。
P.S.您的 dayRender 代码对于版本 3 来说是正确的：fullcalendar.io/docs/v3/dayRender - 您之前是否使用过版本 3，也许？注：还值得注意的是，对 HTML 元素的引用在 v4 中作为原生 DOM 元素提供，而不是作为 jQuery 对象（根据 upgrade guide），因此请确保对元素也使用适当的函数调用。
结论：始终阅读正确版本的文档。

标签： javascript fullcalendar undefined fullcalendar-4

【解决方案1】：

在完整日历 v 4.0 中，按照 ADyson 的建议，使用 dayRender 如下：

dayRender: function (dayRenderInfo) {
   dayRenderInfo.el.innerHTML = "<input type=\"checkbox\">AM<br>";
}

【讨论】：