fullcalendar popover无法使用事件图标

Question

尝试用图标和popover呈现动态事件。无法使popover和图标同时工作。我尝试了几种方法。只有第一个eventRender函数有效。这是代码。

$(document).ready(function () {
$('#calendar').fullCalendar({
timezone: 'local',
height: 700,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: '2021-07-16',
navLinks: true,
eventLimit: true,
events: [{ %
for order in orders %
} {
id: '{{ order.event.id}}',
title: '{{ order.event.title }}',
start: '{{ order.event.start }}',
end: '{{ order.event.end }}',
description: '{{ order.event.description }}',
backgroundColor: '#b3e6ff',
icon: 'calendar-alt',
},
{ % endfor %
}
}
],
eventRender: function (event, element) {
if (event.icon) {
element.find(".fc-title").prepend("<i class='fa fa-" + event.icon + "'></i>");
}
},
eventRender: function (eventObj, $el) {
$el.popover({
title: eventObj.title,
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
},
});
});```

Answer 1

您有两个独立的eventRender函数。。。那是行不通的。当你列出fullCalenadar的选项时，你定义了一个JS对象，其中包含许多命名属性——每个选项一个。

根据标准的JS行为，如果您在一个对象中两次指定相同的属性，这是无效的——它只是使用您编写的最后一个属性。对象中的属性名称必须是唯一的，否则代码无法区分它们。

因此，您只需将单独的eventRender选项组合为一个即可：

eventRender: function (eventObj, $el) {
if (eventObj.icon) {
$el.find(".fc-title").prepend("<i class='fa fa-" + eventObj.icon + "'></i>");
}
$el.popover({
title: eventObj.title,
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
},