Add button in fullcalendar v4 event

狂风中的少年 提交于 2021-01-29 02:10:44

问题


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!


回答1:


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



来源:https://stackoverflow.com/questions/57656685/add-button-in-fullcalendar-v4-event

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!