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

Question

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

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

我在搜索答案和 os 之前找到了上述内容

<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”！重要；和字体系列：“Font Awesome 5 Pro”！重要；.

我也试过 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>

Ben还提供：

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

到这个元素。

Answer 2

Ajax 结果：

events = [{
    'title': '%icon% My Super Title',
    'icon': '<i class="fa fa-bus-alt"></i>',
    ...
  }, {
    ...
  }
];

对于 eventDidMount ：

new FullCalendar.Calendar(..., {
  ...
  eventDidMount: (info) => {
    info.el.querySelector('fc-event-title').innerHTML(
      info.event.title.replace('%icon%', info.event.extendedProps.icon)
    );
  },
  ...
});