From 4c370b92bd8336a67cbd97ac7466854191270fa3 Mon Sep 17 00:00:00 2001 From: Fred Tempez Date: Tue, 27 Aug 2024 17:04:01 +0200 Subject: [PATCH] Calendrier 1.1 --- calendar/calendar.php | 3 - calendar/changes.md | 3 +- calendar/enum.json | 2 +- .../animated-calendar/calendar-gc.min.js | 26 +++++++-- calendar/view/index/index.js.php | 56 ++++++------------- 5 files changed, 42 insertions(+), 48 deletions(-) diff --git a/calendar/calendar.php b/calendar/calendar.php index 1f906f4..628e444 100644 --- a/calendar/calendar.php +++ b/calendar/calendar.php @@ -284,7 +284,6 @@ class calendar extends common padding: 2px; border-radius: 5px; color: red; - background-color: lightgrey; font-size: 18px; width: 90% ; } @@ -292,7 +291,6 @@ class calendar extends common border-radius: 5px; padding: 2px; color: lightgreen; - background-color: darkgrey; font-size: 18px; width: 90% ; } @@ -300,7 +298,6 @@ class calendar extends common padding: 2px; border-radius: 5px; color: orange; - background-color: green; font-size: 18px; width: 90% ; }'; diff --git a/calendar/changes.md b/calendar/changes.md index 07eeb53..a440103 100644 --- a/calendar/changes.md +++ b/calendar/changes.md @@ -1,8 +1,9 @@ -# Version 1.01 +# Version 1.1 - Limite à 80% la largeur de la popup pour les petits écrans. - Contraste de couleurs des textes qui écrasent la couleur définie dans la feuille de style perso. - Largeurs des colonnes fixes. +- Les événements sont représentés par des icônes sur les petites largeurs d'écran. # Version 1.00 - Activer dans la gestion du profil # Version 0.4 diff --git a/calendar/enum.json b/calendar/enum.json index b8ed90d..d0c930e 100644 --- a/calendar/enum.json +++ b/calendar/enum.json @@ -1 +1 @@ -{"name":"calendar","realName":"Calendrier","version":"1.0","update":"0.0","delete":true,"dataDirectory":""} \ No newline at end of file +{"name":"calendar","realName":"Calendrier","version":"1.1","update":"0.0","delete":true,"dataDirectory":""} \ No newline at end of file diff --git a/calendar/vendor/animated-calendar/calendar-gc.min.js b/calendar/vendor/animated-calendar/calendar-gc.min.js index 32baa4a..6de83f6 100644 --- a/calendar/vendor/animated-calendar/calendar-gc.min.js +++ b/calendar/vendor/animated-calendar/calendar-gc.min.js @@ -14,7 +14,8 @@ var gcObject = { }], onclickDate: function (e, t) {}, nextIcon: ">", - prevIcon: "<" + prevIcon: "<", + eventIcon: "📌" }, el: "", eventAnimate: "none", @@ -81,8 +82,7 @@ var gcObject = { gcObject.options.events.forEach((function (t) { if (t.date.getFullYear() == e.datejs.getFullYear() && t.date.getMonth() == e.datejs.getMonth() && t.date.getDate() == e.datejs.getDate()) { n.addClass("event"); - // Vérifiez la largeur de la fenêtre et choisissez le contenu en conséquence - var displayText = $(window).width() <= 600 ? '📌' : t.eventName; + var displayText = $(window).width() <= 600 ? gcObject.options.eventIcon : t.eventName; var a = $(`
${displayText}
`); a.on("click", (function (e) { t.onclick(e, t) @@ -137,7 +137,23 @@ jQuery.fn.calendarGC = function (e = { events: events, onclickDate: onclickDate, nextIcon: ">", - prevIcon: "<" + prevIcon: "<", + eventIcon: "📌" // Notez ici, il n'y a pas de point-virgule. }) { - return gcObject.options.dayNames = e.dayNames || ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], gcObject.options.dayBegin = void 0 === e.dayBegin || null === e.dayBegin ? 1 : e.dayBegin, gcObject.options.monthNames = e.monthNames || ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], gcObject.options.onPrevMonth = e.onPrevMonth || function (e) {}, gcObject.options.onNextMonth = e.onNextMonth || function (e) {}, gcObject.options.events = e.events || [], gcObject.options.onclickDate = e.onclickDate || function (e, t) {}, gcObject.options.nextIcon = e.nextIcon || ">", gcObject.options.prevIcon = e.prevIcon || "<", gcObject.el = this, gcObject.render(), gcObject + // Dans la définition des options, vous n'avez pas pris en compte eventIcon + return gcObject.options.dayNames = e.dayNames || ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], + gcObject.options.dayBegin = void 0 === e.dayBegin || null === e.dayBegin ? 1 : e.dayBegin, + gcObject.options.monthNames = e.monthNames || ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], + gcObject.options.onPrevMonth = e.onPrevMonth || function (e) {}, + gcObject.options.onNextMonth = e.onNextMonth || function (e) {}, + gcObject.options.events = e.events || [], + gcObject.options.onclickDate = e.onclickDate || function (e, t) {}, + gcObject.options.nextIcon = e.nextIcon || ">", + gcObject.options.prevIcon = e.prevIcon || "<", + // Il manque la ligne suivante pour eventIcon + gcObject.options.eventIcon = e.eventIcon || "📌", + gcObject.el = this, + gcObject.render(), + gcObject; }; + diff --git a/calendar/view/index/index.js.php b/calendar/view/index/index.js.php index f368c3d..4e0c410 100644 --- a/calendar/view/index/index.js.php +++ b/calendar/view/index/index.js.php @@ -16,74 +16,51 @@ 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({ +// Définir la fonction d'initialisation du calendrier +function initializeCalendar() { + $("#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: '<', nextIcon: '>', + eventIcon: '📅', onPrevMonth: function (e) { - // console.log("prev"); - //console.log(e); + // Code pour le changement de mois précédent }, onNextMonth: function (e) { - // console.log("next"); - //console.log(e); + // Code pour le changement de mois suivant }, 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); + let eventListHtml = ''; - // 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(); @@ -92,21 +69,24 @@ $(function (e) { } }); - // 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); + $("#calendar").calendarGC('setDate', formattedDate); }); +} - +// Exécuter l'initialisation au chargement du document +$(document).ready(function() { + initializeCalendar(); }); +// Recharger la page lors du redimensionnement de la fenêtre +$(window).resize(function() { + location.reload(); // Recharge la page +}); + + function showPopup(data) {