Symfony 5 Twig 3 Webpack Encore fulllCalendar not rendered

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') }}
        
            #calendar{
    
                width: 80%;
                margin: auto;
    
            }
        
{% endblock %}
{% block title %}
  {{ 'advert.management.periods.title'|trans }}
{% endblock %}
{% block body %}
////

    {% 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();
    
    });
    

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *