Fullcalendar v4活动中的“添加”按钮

时间:2019-08-26 11:05:38

标签: javascript fullcalendar fullcalendar-4

在我的全日历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,

});

哪种方法有效?

谢谢!

1 个答案:

答案 0 :(得分:1)

发生“ .html不是函数”错误是因为.html是jquery function,而el不是jQuery对象(从fullCalendar 4开始)。

.append()仅附加纯文本,不附加HTML。这是mentioned in the documentation

如果要附加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