Symfony+FullCalendar：如何渲染含HTML标签的日程标题

问题现状 #

数据库中课程描述字段包含HTML标签，但当前FullCalendar直接将这些标签以纯文本形式显示，无法解析为页面结构。

解决方案 #

要让FullCalendar正确渲染HTML标签，需利用FullCalendar的eventContent自定义事件内容渲染逻辑，具体步骤如下：

1. 修改Twig中的FullCalendar配置 #

保留原有的事件数据传递逻辑，添加eventContent回调函数来手动渲染带HTML的内容：

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js'></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'listWeek',
            events: {{ data|raw }},
            // 自定义事件内容渲染，解析HTML标签
            eventContent: function(info) {
                var contentContainer = document.createElement('div');
                // 将带HTML的内容插入容器，浏览器自动解析标签
                contentContainer.innerHTML = info.event.title;
                return { domNodes: [contentContainer] };
            }
        });
        calendar.render();
    });
</script>

2. （可选）添加HTML内容安全过滤 #

如果课程描述内容来自用户输入，需防范XSS攻击。可以使用Symfony的HtmlSanitizer组件清理危险标签：

第一步：安装组件

composer require symfony/html-sanitizer

第二步：修改控制器代码

use Symfony\Component\HtmlSanitizer\HtmlSanitizerInterface;

public function getScheduleFromCalendar(LessonRepository $lessonRepository, HtmlSanitizerInterface $sanitizer)
{
    $groupSchedule = $lessonRepository->findGroupLessons('КН-1-4М');
    $lessonsList = [];
    foreach ($groupSchedule as $lesson) {
        if ($lesson->getLessonContent()) {
            // 清理HTML，仅保留安全标签（如b、i、p、br等）
            $sanitizedContent = $sanitizer->sanitize($lesson->getLessonContent());
            $lessonsList[] = [
                'start' => $lesson->getLessonStart()->format('Y-m-d H:i:s'),
                'end' => $lesson->getLessonEnd()->format('Y-m-d H:i:s'),
                'title' => $sanitizedContent,
            ];
        }
    }
    $data = json_encode($lessonsList);

    return $this->render('schedule/index.html.twig', compact('data'));
}

原理说明 #

FullCalendar默认会将title字段作为纯文本处理，通过eventContent回调，我们可以直接操作DOM元素，将带HTML的内容插入到页面中，让浏览器自动解析标签结构。安全过滤步骤则是为了避免恶意HTML代码带来的安全风险。

内容的提问来源于stack exchange，提问作者Вадим