Adding Custom Web Assets for FullCalendar (Symfony / EasyAdmin)

Viewed 22

Symfony : 6.1.4 EasyAdmin : 4.3.5

According to the documentation for adding Custom Web Assets :

Use the configureAssets() method in the dashboard and/or the CRUD controllers to add your own CSS and JavaScript files

So I want to add the FullCalendar assets.

class DashboardController extends AbstractDashboardController
{

//... 
   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');

    }

//...

 #[Route('/admin', name: 'admin')]
    public function index(): Response
    {
        return $this->render('admin/index.html.twig');
    }

}

admin/index.html.twig :

// ...
{% block main %}
    <div id="booking"></div>

{% endblock %}

{% block javascripts %}

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


But the calendar is not displayed.

No errors in my browser console.

0 Answers
Related