Symfony 5 Twig 3 Webpack Encore fulllCalendar not rendered

Question

I'm using Symfony 5, Twig 3, Bootstrap, Webpack Encore and fullCalendar.

The calendar is not rendered into my template.

There is the code :

In the template :

{% 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 %}

In the called 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

By using the class rather than the id, the problem is solved :

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