FullCalendar 5 - 如何将 Font Awesome 图标添加到事件标题

Question

我正在尝试将 Font Awesome 图标添加到 FullCalendar 5 中的事件。我尝试过使用 css：

<script>
     window.FontAwesomeConfig = {
        searchPseudoElements: true
    }
</script>

我在搜索放在前面的答案和操作系统时发现了上述内容

<style type="text/css">

CSS：

.cssItalic {
    font-family: "Font Awesome\ 5 Free" !important;
    content: "\f55e" !important;
    font-style: italic;
    font-weight: bold;
    text-decoration: underline !important;
    text-decoration-thickness: 5px !important;
    text-decoration-color: white !important;
}

这不会添加图标；然而，其余的工作（例如，斜体，粗体，下划线）。我也试过 font-family: "Font Awesome 5 Free" !important;和 font-family: "Font Awesome 5 Pro" !important;.

我也试过 eventDidMount:

eventDidMount: function(event, element) {
    element.find(".fc-title").prepend("<i class='fa fa-bus-alt'></i>");
},

但是，我在元素上收到控制台错误。注意：我无法让 eventRender 在 FullCalendar 5 中工作。

我一直在努力，我想我可能更接近：

eventDidMount: function(info) {
    console.log(info.event.title);
    ("info.event.title").prepend("<i class='fa fa-bus-alt'></i>");
},

console.log 显示第一个标题。但是，然后我得到一个控制台日志错误：

Uncaught TypeError: "info.event.title".append is not a function

我也试过不带引号（同样的错误）：

(info.event.title).prepend("<i class='fa fa-bus-alt'></i>");

Ben Souchet 提出了以下解决方案：

eventDidMount: function(event, element) {
    element.find(".fc-title").prepend("<i class='fa fa-bus-alt'></i>");
},

这会在开始处（即时间之前）显示标签（即不是图标）：

<i class='fa fa-bus-alt'></i>

还提供了本：

eventDidMount: function(info) {
    console.log(info.event.title);
    $(info.el + ' .fc-event-title').prepend("<i class='fa fa-bus-alt'></i>");
},

此解决方案在月、周和日视图中显示时间和标题之间不同数量的多个图标（请参阅附图），并在列表视图中显示错误。错误是：

Uncaught Error: Syntax error, unrecognized expression: [object HTMLTableRowElement].fc-event-title

根据 Ben Souchet 的回答，我可以：

eventDidMount: function(info) {
    console.log(info.event.title);
    $(info.el).find('.fc-event-title').prepend("<i class='fa fa-bus-alt' data-toggle='tooltip' title='Test'></i>");
},

我在服务器端的图标中读取的最终答案是：

eventDidMount: function(info) {
    var icon = info.event.extendedProps.icon;
    if (info.event.extendedProps.icon) {
        $(info.el).find('.fc-event-title').prepend("<i class='fa fa-"+icon+"' data-toggle='tooltip' title='Test'></i>");
    }
},

Answer 1

我没有使用fullcalendar 的经验，但我认为您与eventDidMount 非常接近。

更新答案：

eventDidMount: function(event, element) {
  // Create the icon
  let icon = document.createElement("i");
  icon.classList.add('fa', 'fa-bus-alt');
  // Add icon before the title
  element.querySelector(".fc-title").prepend(icon);
},

另请参阅 @Glyn 帖子的最后一部分，了解他最终使用什么来显示图标 :)

上一个答案：

eventDidMount: function(info) {
    console.log(info.event.title);
    info.el.prepend("<i class='fa fa-bus-alt'></i>");
},

在文档中指出 el 是 DOM 元素，因此在您的情况下，您需要 prepand 到此元素。