时间戳

首页 > 解决方案 > 在 fullcalendar v4 事件中添加按钮

javascript - 在 fullcalendar v4 事件中添加按钮

问题描述

在我的 fullcalendar 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,

});

哪种方式有效？

谢谢！

标签： javascriptfullcalendarfullcalendar-4

解决方案

发生“.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

推荐阅读