Symfony/EasyAdmin添加FullCalendar资源后日历无法显示问题求助

环境版本 #

• Symfony: 6.1.4
• EasyAdmin: 4.3.5

问题描述 #

按照EasyAdmin官方文档「添加自定义Web资源」的说明，在DashboardController中通过configureAssets()方法引入FullCalendar的CSS和JS资源，模板中编写了日历初始化代码，但日历无法显示，浏览器控制台无报错信息。

可能原因及解决步骤 #

1. 容器未设置高度 #

FullCalendar需要渲染容器有明确的高度，否则即使初始化成功也会看不到内容。

• 在模板的stylesheets块中添加样式：

{% block stylesheets %}
    {{ parent() }}
    <style>
        #booking {
            height: 600px;
            width: 100%;
        }
    </style>
{% endblock %}

2. 缺失法语本地化资源 #

代码中设置了locale: 'fr'，但FullCalendar的本地化语言包需要单独引入，否则会默认使用英文，且可能导致渲染异常：

• 在configureAssets()方法中添加法语本地化JS文件：

public function configureAssets(): Assets
{
    return parent::configureAssets()
        ->addWebpackEncoreEntry('admin')
        ->addCssFile('https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css')
        ->addJsFile('https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js')
        ->addJsFile('https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales/fr.min.js'); // 新增法语本地化文件
}

3. 确认data变量是否传递到模板 #

模板中使用了events: {{ data|raw }}，如果控制器未将data变量传入模板，会导致events配置项语法错误（虽控制台无报错，但可能静默失败）：

• 修改控制器的index方法，传递空数组或实际事件数据：

#[Route('/admin', name: 'admin')]
public function index(): Response
{
    $data = []; // 可替换为实际的事件数据
    return $this->render('admin/index.html.twig', [
        'data' => $data,
    ]);
}

4. 确保自定义JS在FullCalendar之后加载 #

虽然使用了DOMContentLoaded，但可以通过parent()确保自定义JS在EasyAdmin引入的资源之后执行：

{% block javascripts %}
    {{ parent() }} {# 先加载EasyAdmin及引入的FullCalendar资源 #}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('booking');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'fr',
                buttonText: {
                    today: 'Aujourd\'hui',
                    month: 'Mois',
                    week: 'Semaine'
                },
                timeZone: 'Europe/Paris',
                headerToolbar: {
                    start: 'prev,next today',
                    center: 'title',
                    end: 'dayGridMonth,timeGridWeek'
                },
                events: {{ data|raw }},
                navLinks: true
            });
            calendar.render();
        });
    </script>
{% endblock %}

验证步骤 #

1. 清除Symfony缓存：执行php bin/console cache:clear
2. 刷新页面，检查日历是否正常显示
3. 若仍有问题，查看页面源代码确认所有资源是否成功加载

内容的提问来源于stack exchange，提问作者Clément HUBERT