问题
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