Fullcalendar v4活动中的“添加"按钮 [英] Add button in fullcalendar v4 event

问题描述

在我的全日历v4.3.1应用程序中，我想向事件添加一些带有jsvascript函数的按钮决策示例，我将其设置为:

  window.calendarEventsObject = new FullCalendar.Calendar(calendarEl，{插件:['dayGrid']，eventRender:函数(eventInfo){eventInfo.el.querySelector('.fc-title').append(< i class ='fa fa-external-link pull-right'> 7890</i>");//正如我预期的那样，我在title中看到了文本，但没有看到html元素//eventInfo.el.querySelector('.fc-title').html(< i class ='fa fa-external-link pull-right'> 7890</i>");//如果要取消注释上面的lline，则会出现错误eventInfo.el.querySelector(...).html不是函数}，事件:eventsList，showNonCurrentDates:否，可正确，allDaySlot:是的，可选:真，selectHelper:是的，selectOverlap:否，fixedWeekCount:否，AspectRatio:0.4，高度:700，}); 

哪种方法有效?

谢谢！

解决方案

由于.html是 jquery函数和 el 不是jQuery对象(从fullCalendar 4开始).

和 .append()仅附加纯文本，而不附加HTML.这是文档中提到的

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

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

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

In my fullcalendar v4.3.1 app I want to add some buttons with jsvascript function to events example with decision I make it as :

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,

});

Which way is valid ?

Thanks!

解决方案

The ".html is not a function" error occurs because .html is a jquery function and el is not a jQuery object (as of fullCalendar 4).

And .append() only appends plain text, not HTML. This is mentioned in the documentation

If you want to append a HTML string then the simplest way is to use innerHTML:

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

Demo: https://codepen.io/ADyson82/pen/JjPJXeb

这篇关于Fullcalendar v4活动中的“添加"按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！