/** * 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 * @copyright Copyright (C) 2008-2018, Rémi Jean * @author Frédéric Tempez * @copyright Copyright (C) 2018-2024, Frédéric Tempez * @license CC Attribution-NonCommercial-NoDerivatives 4.0 International * @link http://zwiicms.fr/ */ const jsonOptions = ''; 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: 1, dayNames: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'], monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], prevIcon: '<', homeIcon: 'H', nextIcon: '>', 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 = ''; $('#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; }