FullCalendar handlers

<!DOCTYPE html>
<html lang='fr'>

<head>
    <meta charset='utf-8' />
    <!-- La librairie fullcalendar -->
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
    <!-- Permet de traduire les boutons, le mois, jour et de mettre le lundi en premier jour de la semaine  -->
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.8/locales/fr.global.min.js'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',

                // Date initiale
                initialDate: '2023-06-11',

                // le calendrier en français
                locale: "fr",

                // Mise en page des boutons
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },

                // Tous les événements
                events: [{
                    title: 'Événement 1',
                    start: '2023-06-12',
                    end: '2023-06-14'
                }, {
                    title: 'Événement 2',
                    start: '2023-06-12T10:30:00',
                    end: '2023-06-12T12:30:00'
                }, {
                    title: 'Événement 3 avec lien',
                    url: 'http://example.org/',
                    start: '2023-06-12T12:00:00'
                }]
            });

            calendar.render();

            // Pour les clics sur les dates
            calendar.on('dateClick', function(info) {
                alert(info.dateStr);
            });

            // Pour les clics sur les événements
            calendar.on('eventClick', function(info) {
                clickedEvent = info.event;
                // Affiche le titre et la date de début
                alert(clickedEvent.title + " " + clickedEvent.start);
            });

        });
    </script>
</head>

<body>
    <!-- Élément pour afficher le calendrier  -->
    <div id='calendar'></div>
</body>

</html>

Commentaires