FullCalendar标题HTML图标不渲染问题求助

问题出在你的eventRender函数里，错误的处理逻辑把HTML内容转成了纯文本，导致图标标签直接以字符串形式显示。

错误原因分析 #

你原来的代码中：

var title = $('<div />').html(info.event.title).text(); // 解析HTML实体
info.el.querySelector('.fc-title').innerHTML = title;

$('<div />').html(info.event.title).text()这一步会把HTML标签解析后提取纯文本内容，相当于直接过滤掉<i class="bi bi-plus"...>这类标签，只保留文字内容，自然没法渲染图标。

修复方案 #

修改eventRender函数，直接将原始HTML内容赋值给标题元素的innerHTML，跳过转文本的步骤：

eventRender: function(info) {
    // 适配不同FullCalendar版本的标题类名：fc-title（旧版）或fc-event-title（v5+）
    var titleElement = info.el.querySelector('.fc-title') || info.el.querySelector('.fc-event-title');
    if (titleElement) {
        titleElement.innerHTML = info.event.title;
    }
}

额外检查项 #

• 确保已正确引入Bootstrap Icons的CSS文件，否则bi类图标无法显示：

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  

• 确认Laravel返回的JSON中title字段的HTML未被转义（Laravel的response()->json()默认不会转义HTML，这部分通常无需额外处理）。

修改完成后，FullCalendar就能正确解析标题中的HTML标签，渲染出对应的图标了。

内容的提问来源于stack exchange，提问作者Ahmad Tahir