在全日历 v4 事件中添加按钮

Question

在我的完整日历 v4.3.1 应用程序中，我想向事件添加一些带有 jsvascript 函数的按钮 示例与决定我将其作为：

window.calendarEventsObject = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid'],
eventRender: function (eventInfo) {
eventInfo.el.querySelector('.fc-title').append("<i class='fa fa-external-link pull-right'>7890</i>");
// I see text in title , but not html element, as I expected  

// eventInfo.el.querySelector('.fc-title').html("<i class='fa fa-external-link pull-right'>7890</i>");
// If to uncomment  the lline above I got error eventInfo.el.querySelector(...).html is not a function
},
events: eventsList,
showNonCurrentDates: false,
editable: true,
allDaySlot: true,
selectable: true,
selectHelper: true,
selectOverlap: false,
fixedWeekCount: false,
aspectRatio: 0.4,
height: 700,
});

哪种方式有效？

谢谢！

Answer 1

发生".html 不是函数"错误是因为.html是一个 jquery 函数，而el不是 jQuery 对象(从 fullCalendar 4 开始(。

.append()只附加纯文本，而不是 HTML。文档中提到了这一点

如果要附加HTML字符串，最简单的方法是使用innerHTML：

eventRender: function (eventInfo) {
eventInfo.el.querySelector('.fc-title').innerHTML += "<i class='fa fa-external-link pull-right'>7890</i>";
}

演示：https://codepen.io/ADyson82/pen/JjPJXeb