Symfony 5 Twig 3 Webpack Encore fulllCalendar not rendered

Question

我使用的是Symfony 5、Twig 3、Bootstrap、Webpack Encore和fullCalendar。

日历未呈现到我的模板中。

有一个代码：

在模板中：

{% extends "base.html.twig" %}
{% block stylesheets %}
{{ parent() }}
{{ encore_entry_script_tags('fullcalendar_daygrid_css') }}
<style>
#calendar{
width: 80%;
margin: auto;
}
</style>
{% endblock %}
{% block title %}
{{ 'advert.management.periods.title'|trans }}
{% endblock %}
{% block body %}
////
<div id='calendar'></div>
{% block javascripts %}
{{ parent() }}
<script>
var events =  {{ events|raw }};
</script>
{{ encore_entry_script_tags('periodsCreationfullCalendar') }}
{% endblock %}
{% endblock body %}

在所谓的js:中

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {

plugins: [ dayGridPlugin ],
initialView: 'dayGridMonth',
locale: 'fr',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth'
},
events: events,
editable: true,
eventResizableFromStart: true
});

calendar.render();
});

Answer 1

通过使用类而不是id，问题得到了解决：

var calendars = document.getElementsByClassName('calendar');
var calendarEl = calendars[0];