尝试使用图标和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'
});
},
});
});```
1条答案
按热度按时间iqxoj9l91#
您有两个独立的eventrender函数……这是行不通的。当您像这样列出fullcalenadar的选项时,您定义了一个包含许多命名属性的js对象——每个选项一个。
根据标准js行为,如果在对象中指定同一属性两次,则该属性无效-它只使用您编写的最后一个属性。对象中的属性名称必须是唯一的,否则代码无法区分它们。
因此,您只需将单独的eventrender选项合并为一个选项: