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" !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 中工作。

我一直在研究这个，我想我可能有点 closer:

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 post 的最后一节，看看他最终用什么来显示图标 :)

上一个回答：

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

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

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

FullCalendar 5 - How to add Font Awesome icons to an Event title

css

fullcalendar

font-awesome-5

fullcalendar-5