Zwii-Modules/calendar/view/index/index.js.php

/**
 * This file is part of Zwii.
 *
 * For full copyright and license information, please see the LICENSE
 * file that was distributed with this source code.
 *
 * @author Rémi Jean <remi.jean@outlook.com>
 * @copyright Copyright (C) 2008-2018, Rémi Jean
 * @author Frédéric Tempez <frederic.tempez@outlook.com>
 * @copyright Copyright (C) 2018-2024, Frédéric Tempez
 * @license CC Attribution-NonCommercial-NoDerivatives 4.0 International
 * @link http://zwiicms.fr/
 */



const jsonOptions = '<?php echo json_encode($module::$agendas); ?>';
const objOptions = JSON.parse(jsonOptions);
//console.log(objOptions);

const events = generateEvents(objOptions);

//  https://www.jqueryscript.net/time-clock/animated-calendar-event-gc.html

$(function (e) {
    const calendar = $("#calendar").calendarGC({
        dayBegin: 0,
        dayNames: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'],
        monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
        prevIcon: '&#x3c;',
        homeIcon: 'H',
        nextIcon: '&#x3e;',
        onPrevMonth: function (e) {
            // console.log("prev");
            //console.log(e);
        },
        onNextMonth: function (e) {
            // console.log("next");
            //console.log(e);
        },
        events: events,

        onclickDate: function (e, data) {
            // Extraire la date cliquée au format YYYY-MM-DD
            const targetDate = formatDate(data.datejs);
            // console.log(data);
            // Filtrer les événements pour la date cliquée
            const filteredEvents = $.grep(events, function (event) {
                //console.log("Comparaison avec : " + formatDate(event.date));
                return formatDate(event.date) === targetDate;
            });

            // Vérifier le nombre d'événements trouvés
            //console.log("Nombre d'événements trouvés : " + filteredEvents.length);

            // Construire le contenu de la popup avec les événements du jour
            if (filteredEvents.length > 0) {
                // Si des événements sont trouvés, les afficher
                eventListHtml = '<ul>';
                $.each(filteredEvents, function (index, event) {
                    // Vérifier si une heure est spécifiée et formater correctement
                    //console.log(event);
                    const eventTime = event.eventTime ? event.eventTime : 'toute la journée';
                    eventListHtml += '<li><strong>' + event.eventName + '</strong><br>' + eventTime + '</li>';
                });
                // Titre de la popup
                eventListHtml += '</ul>';
                $('#popupDate').html('Événements du ' + formatDateToDMY(targetDate));

            } else {
                // Sinon, afficher "Aucun événement"
                eventListHtml = '';
                $('#popupDate').html('Aucun événement le ' + formatDateToDMY(targetDate));
            }

            // Injecter le contenu dans la popup
            $('#eventList').html(eventListHtml);

            // Afficher la popup
            $('#eventListPopup').fadeIn();

            // Fermer la popup lorsqu'on clique sur le bouton de fermeture
            $('.close-btn').on('click', function () {
                $('#eventListPopup').fadeOut();
            });

            // Fermer la popup lorsqu'on clique en dehors du contenu
            $('#eventListPopup').on('click', function (e) {
                if ($(e.target).is('.popup-overlay')) {
                    $(this).fadeOut();
                }
            });
        }
    });

    // Ajoute un écouteur d'événement pour le clic sur l'élément avec la classe gc-calendar-month-year
    $(document).on('click', '.gc-calendar-month-year', function() {
        // Obtient la date courante
        const currentDate = new Date();
        
        // Formate la date au format "YYYY-MM-DD"
        const formattedDate = currentDate.toISOString().split('T')[0];
        
        // Définit la date du calendrier sur la date courante
        calendar.setDate(formattedDate);
    });


});



function showPopup(data) {

    const eventName = data.eventName;

    // Extraire la date et l'heure
    const eventDate = data.date.toLocaleDateString(); // Format : 18/08/2024
    
    // Vérifier si l'heure est définie et extraire l'heure si disponible
    const eventTime = data.eventTime === '' ?'Toute la journée' : 'à ' + data.eventTime; // Format : 12:00
console.log (eventTime);
    // Injecter les informations dans la popup
    $('#eventName').text(eventName);
    $('#eventDate').text(eventDate);
    $('#eventTime').text(eventTime);

    // Afficher la popup
    $('#eventPopup').fadeIn();

    // Fermer la popup lorsqu'on clique sur le bouton de fermeture
    $('.close-btn').on('click', function () {
        $('#eventPopup').fadeOut();
    });

    // Fermer la popup lorsqu'on clique en dehors du contenu
    $('#eventPopup').on('click', function (e) {
        if ($(e.target).is('.popup-overlay')) {
            $(this).fadeOut();
        }
    });
}


function generateEvents(objOptions) {
    return objOptions.map(function (item) {
        return {
            date: new Date(item.date), // Convertir la chaîne de date en objet Date
            eventTime: item.time,
            eventName: item.eventName,
            className: item.className || '', // Ajouter une classe CSS si disponible
            dateColor: item.dateColor || '', // Ajouter une couleur de date si disponible
            onclick: function (e, data) { // Ajouter une fonction onclick
                showPopup(data);
            }
        };
    });
}

function formatDate(datejs) {
    const year = datejs.getFullYear();
    const month = ('0' + (datejs.getMonth() + 1)).slice(-2); // Ajouter un zéro devant si nécessaire
    const day = ('0' + datejs.getDate()).slice(-2); // Ajouter un zéro devant si nécessaire
    return year + '-' + month + '-' + day;
}

function formatDateToDMY(dateString) {
    // Convertir la chaîne de caractères en objet Date
    const datejs = new Date(dateString);

    // Créer un tableau des noms de mois
    const monthNames = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet',
        'août', 'septembre', 'octobre', 'novembre', 'décembre'
    ];

    // Obtenir le jour, le mois et l'année
    const day = datejs.getDate();
    const month = monthNames[datejs.getMonth()];
    const year = datejs.getFullYear();

    // Retourner la date au format "jour mois année"
    return day + ' ' + month + ' ' + year;
}